@charset "utf-8";
html { /*スマホ画面横向きでも等倍で表示させる*/
  -webkit-text-size-adjust: 100%;
}
* { /*境界線までをwidthに含める*/
  box-sizing: border-box;
}
*::after, *::before { /*親要素を継承する*/
  box-sizing: inherit;
}
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
.flotL {
  float: left;
}
.flotR {
  float: right;
}
.flex {
  display: flex;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.more::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border: transparent 5px solid;
  border-left-color: #fff;
  vertical-align: middle;
}
/*******************************************************
ここからデザイン*/
/*font*/
* {
  font-family: "Nico Moji", "Kokoro";
  font-size: 16px;
  line-height: 1.5em;
  color: #7b2f28;
}
.lg_en {
  font-family: 'Fredericka the Great', cursive;
}
.lg_jp {
  font-family: 'Kiwi Maru', serif;
}
.h2 {
  font-size: 1.5em;
  padding: 5%;
}
.skewX {
  transform: skew(-30deg, 0);
}
.textL {
  text-align: left;
}
section {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .h2 {
    font-size: 2em;
    padding: 20px;
  }
  section {
    margin-bottom: none;
  }
}
/*******************************************************
背景*/
body { /*body*/
  background: url("../img/top_top.png")repeat-x, repeating-linear-gradient(45deg, rgba(250, 231, 186, 0.50), rgba(250, 231, 186, 0.50) 47px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 139px), repeating-linear-gradient(315deg, rgba(250, 231, 186, 0.50), rgba(250, 231, 186, 0.50) 47px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 139px);
  box-sizing: border-box;
}
#wrap {
  display: block;
  margin-left: 20px;
  margin-right: 20px;
}
@media (min-width: 768px) {
  body {
    background: repeating-linear-gradient(45deg, rgba(250, 231, 186, 0.50), rgba(250, 231, 186, 0.50) 47px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 139px), repeating-linear-gradient(315deg, rgba(250, 231, 186, 0.50), rgba(250, 231, 186, 0.50) 47px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 139px);
    box-sizing: border-box;
  }
  #wrap {
    display: block;
    width: 100%;
    padding: 0 30px;
    margin: 0;
  }
}
/*******************************************************
ここから下層topデザイン*/
.area {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: -100px;
  z-index: -100;
}
.tsutsuji,.edamame{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.tsutsuji li, .edamame li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  animation: animate 25s linear infinite;
}
.tsutsuji li {
  background: url("../img/tsutsuji.png")no-repeat;
  background-size: contain;
}
.edamame li {
  background: url("../img/edamame.png")no-repeat;
  background-size: contain;
}
.kounotori li{
    
}
.tsutsuji li:nth-child(1), .edamame li:nth-child(1) {
  left: 25%;
  width: 8%;
  height: 8%;
  animation-delay: 0s;
}
.tsutsuji li:nth-child(2), .edamame li:nth-child(2) {
  left: 10%;
  width: 12%;
  height: 12%;
  animation-delay: 2s;
  animation-duration: 12s;
}
.tsutsuji li:nth-child(3), .edamame li:nth-child(3) {
  left: 70%;
  width: 9%;
  height: 9%;
  animation-delay: 4s;
}
.tsubaki li:nth-child(4), .edamame li:nth-child(4) {
  left: 40%;
  width: 16%;
  height: 16%;
  animation-delay: 0s;
  animation-duration: 18s;
}
.tsutsuji li:nth-child(5), .edamame li:nth-child(5) {
  left: 65%;
  width: 14%;
  height: 14%;
  animation-delay: 0s;
}
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
/*******************************************************
ヘッダー*/
header {
  display: block;
  width: 100vw;
    margin-top: 50px;
  margin-bottom: 30px;
}

/*******************************************************
logo*/
.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
    width: 100vw;
    height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	
}
.start img{
    width: 100%;
    height: auto;
}
h1 {
  margin: 0 auto;
  width: 100%;
  height: auto;
    padding-left: 2em;
    padding-right: 2em;
}

#topview {
  display: none;
}

#logo_top {
  width: 100%;
  height: auto;
}
header span {
  font-weight: bold;
  font-size: 1.2em;
  background: linear-gradient(transparent 50%, #FCAA00 50%);
}
header p { /*カフェまでドライブLet’s hang out !*/
  text-align: center;
  font-size: 1.3em;
}
h1 img {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  #topview {
    display: block;
    margin-top: 100px;
    margin-bottom: 30px;
       
    width: 100%;
    height: auto;
    background-color: #fff; /* 背景色 */
 box-shadow: 0 0 5px 5px #fae7ba, 0 0 5px 3px #fae7ba inset; /* 影 */
      border-radius: 20% 60% 60% 50% / 80% 30% 70% 30%;
    
  }
  #logo_top {
    display: none;
  }
  header p { /*カフェまでドライブLet’s hang out !*/
    text-align: center;
    font-size: 3em;
  }
  .under p {
    font-size: 2em;
  }
  #logo {
    padding-top: 0;
    margin-left: 24%;
  }
  h1 {
  width: 90%;
  height: auto;
    padding-left: 2em;
    padding-right: 2em;
}
}
/*******************************************************
topへのリンク*/
#top_link {
  position: fixed;
  left: 80%;
  bottom: 5%;
  z-index: 100;
}
#top_link img {
  width: 60%;
  height: auto;
}
@media (min-width: 768px) {
  #top_link img {
    width: 40%;
    height: auto;
  }
}
/*******************************************************
グローバルナビゲーション*/
#global_nav {
  display: none;
}
@media (min-width: 768px) {
  #global_nav {
    background: url("../img/top_top.png")bottom repeat-x;
    display: block;
    position: fixed;
    width: 100vw;
    height: 100px;
    top: 0;
    transition: .5s;
    z-index: 999;
  }
  #global_nav.hide {
    transform: translateY(-100%);
  }
  #global_nav ul {
    background-color: rgba(98, 128, 179, 0.8);
    background-image: repeating-linear-gradient(-55deg, transparent, transparent 10px, rgba(98, 128, 179, 0.4) 10px, rgba(98, 128, 179, 0.4) 20px);
    padding: 7px 10px;
  }
  #global_nav ul li {
    border-radius: 10px;
    text-align: center;
    flex-grow: 1;
    padding: 0 10px;
    margin: 0 10px;
  }
  #global_nav ul li a {
    display: block;
    font-size: 1.5em;
    color: #fff;
  }
  #global_nav ul li:hover {
    background: rgba(255, 255, 255, 0.50);
    transition: .4s all;
  }
  #global_nav ul li a:hover {
    color: #6280b3;
  }
}
/*******************************************************
ハンバーガーメニュー*/
.hamburger {
  display: block;
  position: fixed;
  z-index: 3;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 6px;
  background: #6280b3;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}
/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  width: 24px;
  background: rgba(255, 255, 255, 0.50);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: active-btn17-bar02 .8s forwards;
  animation: active-hamburger-bar02 .8s forwards;
}
@-webkit-keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-hamburger-bar02 {
  100% {
    height: 0;
  }
}
.hamburger.active span:nth-child(3) {
  top: 16px;
  width: 24px;
  background: rgba(255, 255, 255, 0.50);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: '';
  width: 52px;
  height: 52px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: all .75s;
}
.hamburger.active::after {
  border: 2px solid rgba(255, 255, 255, 0.50);
}
nav.globalMenuSp {
  position: fixed;
  z-index: 2;
  top: -680px; /*マイナスの値で画面外に持っていく*/
  transition: top .5s; /*あとで解説します*/
  background: rgba(98, 128, 179, 0.7);
  text-align: center;
  width: 100%;
  opacity: 0;
}
nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:active {
  background: #fff;
}
nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration: none;
}
nav.globalMenuSp ul li a:active {
  color: #6280b3;
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  top: 0;
  opacity: 100;
}
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .hamburger span {
    display: none;
  }
  nav .globalMenuSp {
    display: none;
  }
}
/*******************************************************
section #info*/
/*#info {
  display: inline-block;
  width: 45%;
  position: absolute;
  z-index: 10;
  margin-left: 35%;
  margin-top: 5%;
}*/
#info p {
  font-size: 0.7em;
}
#info .link {
  background: linear-gradient(transparent 90%, #f2a516 90%);
  margin-left: 25%;
  font-weight: bold;
  padding-top: 30px;
}
#info {
    display: inline-block;
    position: absolute;
    background: none;
	border: 1px solid #7b2f28;	/* 線の太さ・種類・色 */
	margin-left: 35%;
  margin-top: 5%; /* 外側の余白 上下・左右 */
	padding: 13px; /* 内側の余白 */
    padding-right: 0;
	width: 50%;
    z-index: 10;
}
#info::before{
	
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
  #info h2 {
    text-align: center;
    font-size: 1.5em;
      
  }
#info:after{
	background: none;
	border: 1px solid #7b2f28;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
@media (min-width: 768px) {
  #info {
    width: 30%;
    margin-top: 10%;
    margin-left: 25%;
    line-height: 2em;
    text-align: left;
  }

  #info p {
    font-size: 1em;
  }
  #info .link {
    margin-left: 5%;
    padding-top: 50px;
    font-size: 1.5em;
  }
  #info span {
    font-size: 1.5em;
  }
}
/*******************************************************
メインマップsection #map*/
#map {
  position: relative;
  width: 100%;
  height: 100vh;
  background: rgba(250, 231, 186, 0.7);
  border-radius: 10px;
  padding-bottom: 10px;
}
.link_icon {
  display: block;
  position: relative;
  width: 100%;
  height: 90vh;
}
#map_img {
  display: block;
  position: relative;
  width: 100%;
  height: 90vh;
}
.link_icon img {
  position: absolute;
}
.yureru_j {
  animation: yureru_j 2s infinite;
}
@keyframes yureru_j {
  0% {
    transform: translate(0px, 2px);
  }
  5% {
    transform: translate(0px, -2px);
  }
  10% {
    transform: translate(0px, 2px);
  }
  15% {
    transform: translate(0px, -2px);
  }
  20% {
    transform: translate(0px, 2px);
  }
  25% {
    transform: translate(0px, -2px);
  }
  30% {
    transform: translate(0px, 0px);
  }
}
#sekiyado {
  top: 0%;
  left: 10%;
}
#simizu {
  top: 55%;
  left: 5%;
}
#sand {
  top: 55%;
  left: 25%;
}
#burger {
  top: 53%;
  left: 45%;
}
#very {
  top: 65%;
  left: 10%;
}
#osenbei {
  top: 65%;
  left: 30%;
}
#mori {
  top: 65%;
  left: 50%;
}
#sakuragi {
  top: 75%;
  left: 18%;
}
#toit {
  top: 80%;
  left: 35%;
}
@media (min-width: 768px) {
  #map {
    background: rgba(250, 231, 186, 0.7);
    background-size: contain;
    display: block;
    float: left;
    width: 60%;
    height: 100vh;
    margin-right: 3%;
    /*border: 1px solid #f00;*/
  }
  #map_img {
    width: auto;
    left: 10%;
  }
  .link_icon {
    width: 100%;
    height: 90vh;
  }
  #sekiyado {
    top: 0%;
    left: 5%;
    margin-left: 70px;
  }
  #simizu {
    top: 55%;
    left: 5%;
    margin-left: 50px;
  }
  #sand {
    top: 55%;
    left: 5%;
    margin-left: 110px;
  }
  #burger {
    top: 53%;
    left: 5%;
    margin-left: 180px;
  }
  #very {
    top: 65%;
    left: 5%;
    margin-left: 50px;
  }
  #osenbei {
    top: 65%;
    left: 5%;
    margin-left: 120px;
  }
  #mori {
    top: 65%;
    left: 5%;
    margin-left: 200px;
  }
  #sakuragi {
    top: 75%;
    left: 5%;
    margin-left: 80px;
  }
  #toit {
    top: 80%;
    left: 5%;
    margin-left: 140px;
  }
}
/*******************************************************
home_ショップ紹介*/
.shop_view img {
  width: 300px;
  height: auto;
}
@media (min-width: 768px) {
  #shop, .banar {
    display: block;
    float: right;
    width: 37%;
  }
}
/*******************************************************
スライダー*/
#top section .banar {
  background-color: none;
}
.slider {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-points-x: repeat(300px);
  -ms-scroll-snap-points-x: repeat(300px);
  scroll-snap-points-x: repeat(300px);
  -webkit-scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
}
.shop_view img {
  width: 200px;
  height: auto;
}
.slide {
  margin-left: 5px;
  flex-shrink: 0;
  height: 100%;
  scroll-behavior: smooth;
}
#subImg .slide {
  margin: 0;
}
.pc_banar {
  display: none;
}
@media (min-width: 768px) {
  .phone_banar {
    display: none;
  }
  .pc_banar {
    display: block;
  }
  .pc_banar img {
    display: block;
    padding: 5px;
    max-width: 300px;
    height: auto;
  }
}
/*******************************************************
フッター*/
footer {
  background: #61b859;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
footer .footer_nav {
  margin-bottom: 40px;
}
footer nav ul {
  margin-right: 5%;
  margin-left: 5%;
    padding-top: 5%;
}
footer .flotL{
    display: inline-block;
    border: 1px solid #fae7ba;
    width: 50%;
    height: auto;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
}
footer .flotL:nth-child(even){
    border-left: none;
}
footer .flotL:nth-child(1){
    border-bottom: none;
}
footer .flotL:nth-child(2){
    border-bottom: none;
}
footer .flotL:last-child{
    border: none;
    padding: none;
    width: 100%;
}
footer a {
    display: block;
  color: #fae7ba;
}
footer p {
  text-align: center;
}
footer p.kakuu {
  color: #f2a516;
  font-size: 1.5em;
  -webkit-text-stroke: 1px #7e2c1e;
  text-shadow: 2px 2px 0 #7e2c1e;
}
footer p small {
  color: #fae7ba;
}
#link_contact img {
  width: 50%;
  height: auto;
  padding-top: 5%;
}
@media (min-width: 768px) {
  #link_contact {
    display: block;
    width: 300px;
    height: auto;
    margin-left: 5%;
  }
  #link_contact img {
    width: 100%;
    height: auto;
  }
    footer nav ul{
        
    padding-top: 0;
    }
    footer .flotL{
        width: 25%;
        border: none;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/*******************************************************
下層コンテンツ*/
#about #contens {
  background: rgba(250, 231, 186, 0.7);
  border-radius: 10px;
  padding-bottom: 10px;
}
#contens p {
  text-align: center;
}

#contens img {
  margin-left: 10%;
  width: 80%;
  height: auto;
  border-radius: 20% 60% 60% 50% / 80% 30% 70% 30%;
}
.content h3 {
    display: block;
    margin: 5px auto;
  padding-left: 5%;
  padding-bottom: 5px;
  margin-top: 10px;
  width: 8em;
  border: 3px #61b859 solid;
  color: #fff;
  border-radius: 20% 60% 60% 50% / 80% 30% 70% 30%;
  background: rgba(97, 184, 89, 0.8);
}
.main_view p{
    font-size: 1em;
    padding-bottom: 1em;
}
.content p {
  font-size: 0.7em;
  line-height: 1em;
}
.content .lg_en{
    text-align: left;
    font-size: 1.5em;
}
.contet_link {
  border: 1px #f2a516 solid;
    margin-top: 10px;
    border-bottom: 5px #f2a516 solid;
    border-right: 3px #f2a516 solid;
  padding: 10px;
  border-radius: 6px;
  line-height: 5em;
}

.facebook {
  text-align: center;
}
.m_size {
  display: block;
  position: absolute;
  left: -10000px;
}
.colm{
    display: block;
        position: relative;
        width: 70%;
    background: none;
	border: 1px solid #7b2f28;	/* 線の太さ・種類・色 */
    margin: 0 auto;
  margin-top: 5%; /* 外側の余白 上下・左右 */
	padding: 13px; /* 内側の余白 */
    padding-right: 0;
	
    z-index: 10;
}
.colm::before{
	
	position: absolute;
	top: -10px;
	left: 30px;
	text-align: center;
}
    .colm::after{
	background: none;
	border: 1px solid #7b2f28;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#contens .MT{
    margin-top: 20px;
}
@media (min-width: 768px) {
  #contens img {
    width: 70%;
    height: auto;
  }
  .main_view {
    display: block;
    float: left;
    width: 60%;
    height: 60%;
    margin-right: 3%;
  }
    .main_view p{
    font-size: 1.5em;
}

  .content {
    
    margin-bottm: 5%;
    display: block;
    
  }
  .content h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
  }
  .content p {
    font-size: 1em;
      line-height: 1em;
      
  }
  .s_size {
    display: block;
    position: absolute;
    left: -10000px;
  }
  .m_size {
    position: relative;
    left: 2%;
  }
    .colm{
        
        position: relative;
        width: 45%;
        float: left;
    margin: 0;
  margin-top: 5%; 

}

    .colm:first-of-type{
        margin-right: 5%;
        margin-left: 2.5%;
    }
}
/*******************************************************
iconフォント*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?espkyq');
  src:  url('fonts/icomoon.eot?espkyq#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?espkyq') format('truetype'),
    url('fonts/icomoon.woff?espkyq') format('woff'),
    url('fonts/icomoon.svg?espkyq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bubble::after {
padding-left: 0.5em;
  content: "\e96b";
}
.icon-smile::after {
  content: "\e9e1";
    padding-left: 0.5em;
}
.icon-point-up::after {
  content: "\ea03";
    padding-left: 0.5em;
}
.icon-new-tab::before {
  content: "\ea7e";
    padding-right: 0.5em;
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram::before {
  content: "\ea92";
    padding-right: 0.5em;
    
}
.icon-twitter:before {
  content: "\ea96";
}