@charset "utf-8";

/*===============
  common elements
  ===============*/

html,body {margin: 0;
          padding: 0;}

body {position: absolute;
     font-size: 100%;
   font-family: Helvetica,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo", sans-serif;
         color: #000000;
    background: #ffffff;
         width: 100%;
   line-height: 25px;
    text-align: left;}

#wrap {position: absolute;
          width: 100%;
        z-index: -9;}

header {        color: #000000;
           margin-top: -30px;
              padding: 0;
           text-align: center;
      background-size: cover;
  background-position: center center;
    background-repeat: no-repeat;}

h1 {text-align: center;}

h2 {font-weight: bold;
     text-align: center;}

h3 {font-weight: bold;
     text-align: center;}

h4 {font-weight: bold;
     text-align: center;}

h5 {font-weight: bold;
      font-size: 100%;
    line-height: 15px;
     text-align: center;}

h6 {font-weight: bold;
      font-size: 100%;
         margin: 0;
        padding: 0;}

section {position: relative;}

article {position: relative;}

footer {margin: 50px 0 20px;
         width: 100%;}

a {text-decoration: none;}

a:link,a:visited {color: #000000;}

a:hover,a:active {color: #777777;}

hr {border-top: 1px solid #8c8b8b;}

.img {width: 100%;
     height: auto;
     vertical-align: bottom;}

.shadow {     border: 3px solid #ffffff;
  -webkit-box-shadow: 0px 7px 13px 0px rgb(95,102,85); 
     -moz-box-shadow: 0px 7px 13px 0px rgb(95,102,85);
          box-shadow: 0px 7px 13px 0px rgb(95,102,85);} 

.top {display: block;
   text-align: center;}

.int {text-indent: 1em;}

.-int {padding-left: 1em;
        text-indent: -1em;}

.link { background-image: url("../image/icon/arrow-right-s.png");
       background-repeat: no-repeat;
     background-position: 11em 5px;
         background-size: 16px 16px;
        background-color: #d4d9d6;
                 display: block;
                 padding: 5px 10px;
             line-height: 15px;
                   width: 11em;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
           border-radius: 5px;}

.ml {margin-left:1em;}

.emp {font-size: 110%;}

.dlh {width: 100%;
     margin: 0 auto;}

.dlh dt {font-weight: bold;}

#mailform {margin: 0 auto 50px;
            width: 180px;}

.mailform {   font-size: 180%;
            font-weight: bold;
                display: table-cell;
                 border: 1px solid #364047;
             text-align: center;
         vertical-align: middle;
                  width: 180px;
                 height: 60px;
       background-color: #f0f6da;
  -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;}

#copyright {font-size: 70%;
           margin-top: 50px;
           text-align: center;}

/*=================
  display(top page)
 ==================*/

#ad {font-size: 100%;
   font-weight: bold;
    margin-top: 20px;
       padding: 0 20px;
    text-align: center;}

#onlinestore {margin: 50px 0 45px;
          text-align: center;}

#news {font-size: 200%;
     font-weight: bold;
      margin-top: 30px;
      text-align: center;}

.news-date {float: left;
      font-weight: bold;
      line-height: 15px;
            width: 6em;
            clear: both;}

.news {background-image: url("../image/icon/arrow-right-s.png");
      background-repeat: no-repeat;
    background-position: top right; 
        background-size: contain;
            line-height: 15px;
            margin-left: 3em;
                display: block;}

.instagram {margin-top: 5%;
            text-align:center;}

.instagram-widget {margin-top: 7%;
                      padding: 0;
                   text-align: center;}

#instafeed {margin-bottom: 25px;}

.simply-scroll-container {position: relative;}

.simply-scroll-clip {position: relative;
                     overflow: hidden;}

.simply-scroll-list {overflow: hidden;
                       margin: 0;
                      padding: 0;}

.simply-scroll-list li {float: left;
                      padding: 0;
                       margin: 0;
                   list-style: none !important;}

.simply-scroll-list li img {display: block;
                              width: 180px;
                             height: 180px;}

/*====
  news
  ====*/

.news-d-date {  float: left;
          font-weight: bold;
     background-image: url("../image/icon/arrow-left-s.png");
    background-repeat: no-repeat;
  background-position: top left;
      background-size: contain;
           text-align: left;
          line-height: 15px;
         padding-left: 3em;
                width: 6em;
                clear: both;}

.news-d {font-weight: bold;
         line-height: 15px;
             display: block;
          text-align: left;
         margin-left: 6em;}

.news-d-past {  float: left;
          font-weight: bold;
           text-align: left;
          line-height: 15px;
         padding-left: 3em;
                width: 6em;
                clear: both;}

/*=====
  about
  =====*/

hr.h {      border: 0;
     border-bottom: 4px double #2f4f4f;
        text-align: center;
        margin-top: 30px;}

hr.h:after {  content: "";
           background: url("../image/icon/about.png");
      background-size: contain;
    background-repeat: no-repeat;
  background-position: center;
     background-color: #ffffff;
              padding: 0 10px;
             position: absolute;
                  top: 0;
                 left: 50%;
                width: 24px;
               height: 24px;
  -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
       -o-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);}

hr.d {   border: 0;
  border-bottom: 4px double #2f4f4f;
         margin: 30px 0;}

#point-img {margin-top: 10px;}

#point {background-color: #dbebc4;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;}

#shop {width:55%;
  text-align: center;
  margin: 20px auto 0;}

#coordinator {display: table;
               margin: 0 0 30px;}

/*=======
  gallery
  =======*/

#gallery-top {margin-top: 30px;}

.gallery-left {float: left;
               width: 48%;
        margin-right: 1%}

.gallery-right {float: left;
                width: 48%;
          margin-left: 1%}

.gallery-clear {clear: both;
              padding: 30px 0 70px;}

#blog {margin: 70px 0;
   text-align: center;}

figure {position: relative;
          border: solid 1px #5f5f5f;
          margin: 0 auto 2%;
           width: auto;
        overflow: hidden;}

figcaption {position: absolute;
               width: 76%;
         font-weight: bold;
          text-align: center;
  -webkit-transition: 1.0s;
          transition: 1.0s;}

figure:hover figcaption {right: 100%;}

.fb {  color: #000000;
  background: rgba(255,255,255,0.6);}

.fw {  color: #ffffff;
  background: rgba(0,0,0,0.6);}

/*=====
  order
  =====*/

#order {display: table;
     text-align: center;
         margin: 0 auto;}

.order-top {display: block;
         text-align: center;
             margin: 30px 0;}

#coordinate-img {margin-top: 10px;}

.price {text-align: center;
     margin-bottom: 30px;}

/*=============
  locationspace
  =============*/

#locationspace-top {margin-top: 50px;}

#locationspacephoto-top {margin: 70px auto 0;}

.locationspacephoto {width:80%; height: auto;margin:0 auto;}

.dll {width: 300px;
     margin: 0 auto;}

.dll dt {float: left;
       padding: 5px 0;
         clear: both;}
    
.dll dd {margin-left: 100px;
             padding: 5px 0;}

.t {margin-top: 30px;}

.t60 {width : 60%;
      margin: 0 auto;
  text-align: center;}

.thw20 {width: 30%}

.thw40 {width: 40%}

/*===
  q&a
  ===*/

.qdt img {float: left;}

.qdt p {overflow: hidden;
      padding-top: 12px;}

.add img {float: left;}

.add p {overflow: hidden;
      padding-top: 2px;}

/*=======
  payment
  =======*/

table {     width: 100%;
       background: #fcfcfc;
  border-collapse: collapse;
   border-spacing: 0;}

table tr {text-align: center;}

table th {background: #f3f3f3;
              border: solid 1px #d3d3d3;
         font-weight: normal;
             padding: 0 1px;}

table td {border: solid 1px #d3d3d3;
         padding: 0 1px;}

.thw10 {width :10%}

.thw40 {width 410%}

/*===========
  header menu
  ===========*/

/*--------
  shy-menu
  --------*/

* {
  -moz-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -webkit-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -o-transition: all .4s cubic-bezier(.1,.7,.3,1);
  -ms-transition: all .4s cubic-bezier(.1,.7,.3,1);
  transition: all .4s cubic-bezier(.1,.7,.3,1);
}

ul {list-style: none;
    text-indent: 10px;
    line-height: 25px;
    font-size: 90%;
    margin-top: 5px;
    padding: 0;}

.shy-menu {display: block;
          position: fixed;
               top: 0;
              left: 0;
             color: #ffffff;
            height: 35px;
      padding-left: 5px;
             width: 80px;
  background-color: #000000;
  border-bottom-right-radius: 10px;}

.shy-menu.is-open,.shy-menu:hover {background-color: #000000;}

.shy-menu img {vertical-align: middle}

.shy-menu:before {position: absolute;
                   content: "Menu";
                 font-size: 90%;
               font-weight: bold;
                    margin: 5px 0 0 30px;}

.shy-menu.is-open {height: 260px;
                   width: 120px;}

.is-open .shy-menu-panel {margin-left:0;}

.is-open::before {position: absolute;
	           content: 'Close';
                 font-size: 90%;
               font-weight: bold;
                    margin: 5px 0 0 30px;}

.shy-menu-panel {margin-left: -240px;}

.shy-menu-panel a {text-decoration: none;
                           display: block;
                             width: 120px;
                             color: #ffffff;}

.shy-menu-panel a:link {text-decoration: none;
                                  color: #ffffff;}

.shy-menu-panel a:visited {text-decoration: none;
                                     color: #ffffff;}

.shy-menu-panel a:hover {text-decoration: none;
                                 display: block;
                                   color: #ffffff;
                           border-bottom: solid 1px #abb1b5;}

.shy-menu-panel a:active {text-decoration: none;
                                    color: #ffffff;}

/*------------------
  shy-menu hamburger
  ------------------*/

.shy-menu-hamburger {position: relative;
                         left: 0;
                          top: 0;
                        width: 70px;
                       height: 30px;
                      display: block;
                     overflow: hidden;
                       cursor: pointer;}

.shy-menu-hamburger > .layer {background-color: #ffffff;
                                 border-radius: 1px;
                                       display: block;
                                        height: 3px;
                                      overflow: hidden;
                                      position: absolute;
                                          left: 5px;
                                         width: 18px;}

.shy-menu-hamburger .layer.top {top: 9px;}

.is-open .shy-menu-hamburger .layer.top {top: 15px;
                                        left: 8px;
                                   transform: rotate(45deg);}

.shy-menu-hamburger .layer.mid {top: 16px;}

.is-open .shy-menu-hamburger .layer.mid {opacity: 0;
                                            left: 0;}

.shy-menu-hamburger .layer.btm {top: 23px;}

.is-open .shy-menu-hamburger .layer.btm {top: 15px;
                                        left: 8px;
                                   transform: rotate(-45deg);}

/*-------------------
  shy-menu background
  -------------------*/

#about-bg {background-image: url("../image/background/about.jpg");}
#gallery-bg {background-image: url("../image/background/gallery.jpg");}
#locationspace-bg {background-image: url("../image/background/locationspace.jpg");}
#order-bg {background-image: url("../image/background/order.jpg");}
#contact-bg {background-image: url("../image/background/contact.jpg");}

/*------------
  shy-menu sns
  ------------*/

#sns a {display: inline;
   margin-right: 5px;}

.sns-list-box {display: table;
                margin-top: 5px;
       border-collapse: collapse;
                 width: 100px;}

.sns-list-box a:hover {border-bottom: none;
                       border-radius: 10px;
                    background-color: #abb1b5;}

.sns-list-text {display: table-cell;
                padding: 4px;
         vertical-align: middle;
             text-align: left;}

/*===========
  footer menu
  ===========*/

#f-menu {display: table;
  vertical-align: middle;
          margin: 0 auto;}

#f-menu a {display: inline;}

#f-menu a:link {color: #000000;}

#f-menu a:visited {color: #000000;}

#f-menu a:hover {color: #777777;}

#f-menu a:active {color: #000000;}

#f-menu-img {position: relative;
               margin: 0 auto;} 

#f-menu-img h2 {position: absolute;
                     top: 0;
                    left: 0;
                   right: 0;
                  bottom: 0;
                  margin: auto;}

/*===================
  mediaqueries layout
  ===================*/

/*----------
  smartphone
  ----------*/

@media print, screen and (max-width: 480px) {

.hh {height: 400px;}

.fsize {font-size:10px;}

.logo-st {padding-top: 120px;}

.logo1-st {width: 55%;
          height: 55%;}

.logo2-st {width: 42%;
          height: 55%;}

.logo3-st {width: 34%;
          height: 55%;}

.logo-s {padding-top: 150px;
       margin-bottom: 5px;}

.logo1-s {width: 28%;
         height: 28%;}

.logo2-s {width: 21.4%;
         height: 28%;}

.logo3-s {width: 18.4%;
         height: 28%;}

.logo-f,.logo-n {padding-top: 65px;
                      margin: 0 0 5px;}

.logo1-f,.logo1-n {width: 32%;
                  height: 32%;}

.logo2-f,.logo2-n {width: 25%;
                  height: 32%;}

.logo3-f,.logo3-n {width: 20%;
                  height: 32%;}

.menu-s {font-size: 300%;
        margin-top: 0;
       padding-top: 0;}

.menu-f {font-size: 200%;
       padding-top: 60px;}

h2 {font-size: 150%;
  padding-top: 50px;
  line-height: 35px;}

h3 {font-size: 90%;}

h4 {font-size: 100%;}

section {font-size: 70%;
       line-height: 20px;
           padding: 0 10px;}

.top {font-size: 90%;}

.onlinestore {width: 50%;
             height: 50%;}

#point-img {width: 20%;
           height: 20%;}

#point {margin: 0;
       padding: 10px;}

.coordinator {width: 100%;
            padding: 0;
     vertical-align: top;}

figcaption { right: 25%;
            bottom: 25%;
         font-size: 80%;
            height: auto;}

#order {line-height: 15px;}

.order        {display: table-cell;
                border: 1px solid #364047;
                 width: 40px;
                height: 40px;
      background-color: #f0f6da;
 -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
         border-radius: 75px;}

.order img {width: 65%;
           height: 65%;
      padding-top: 7px;}

.order-titlle {display: block;
           font-weight: bold;
            text-align: center;
             word-wrap: break-word;}

.order-caption {text-align: left;
                margin-top: 10px;
                     width: 40px;}

.order-arrow {display: table-cell;
       vertical-align: top;
              padding: 0 5px;}

.order-arrow img {width: 10px;
                 height: 10px;
             margin-top: 16px;}

.dlh dt,.dlh dd {padding: 0;}
    
.dlh dt {float: none;}

#coordinate-img {width: 40%;
                height: 40%;}

.f-menu {text-align: center;
          font-size: 70%;
        font-weight: bold;
            padding: 0 20px;}

.f-menu-img {width: 90%;
             height: 90%;}

}

/*------
  tablet
  ------*/

@media print, screen and (min-width: 481px) and (max-width: 768px) {


.hh {height: 500px;}

.logo-st {padding-top: 170px;}

.logo1-st {width: 30%;
          height: 30%;}

.logo2-st {width: 22.5%;
          height: 30%;}

.logo3-st {width: 18.5%;
          height: 30%;}

.logo-s {padding-top: 185px;}

.logo1-s {width: 15%;
         height: 15%;}

.logo2-s {width: 11.7%;
         height: 15%;}

.logo3-s {width: 9.7%;
         height: 15%;}

.logo-f,.logo-n {padding-top: 35px;
                      margin: 0 0 5px;}

.logo1-f,.logo1-n {width: 23%;
                  height: 23%;}

.logo2-f,.logo2-n {width: 17%;
                  height: 23%;}

.logo3-f,.logo3-n {width: 14%;
                  height: 23%;}

.menu-s {font-size: 400%;
        margin-top: 0;
       padding-top: 0;}

.menu-f {font-size: 280%;
       padding-top: 130px;}

h2 {font-size: 200%;
  padding-top: 120px;}

h3 {font-size: 130%;}

h4 {font-size: 120%;}

section {font-size: 75%;
           padding: 0 30px;}

.top {font-size: 115%;
          line-height: 30px;}

.onlinestore {width: 35%;
             height: 35%;}

#point-img {width: 11%;
           height: 11%;}

#point {margin: 0px 30px;
       padding: 10px 20px;}

.coordinator {display: table-cell; 
                width: 50%;
              padding: 10px;
       vertical-align: top;
          line-height: 20px;}

figcaption { right: 25%;
            bottom: 20%;
            height: auto;}

#order {line-height: 18px;}

.order        {display: table-cell;
                border: 1px solid #364047;
                 width: 100px;
                height: 100px;
      background-color: #f0f6da;
 -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
         border-radius: 75px;}

.order img {width: 65%;
           height: 65%;
      padding-top: 18px;}

.order-titlle {display: block;
           font-weight: bold;
            text-align: center;
             word-wrap: break-word;}

.order-caption {text-align: left;
                margin-top: 10px;
                     width: 100px;}

.order-arrow {display: table-cell;
       vertical-align: top;
              padding: 0 5px;}

.order-arrow img {width: 24px;
                 height: 24px;
             margin-top: 40px;}

.dlh dt {float: left;
       padding: 5px 0 5px 20px;
         width: 140px;
         clear: both;}
    
.dlh dd {margin-left: 160px;
             padding: 5px 20px 5px 0;}

#coordinate-img {width: 20%;
                height: 20%;}

.f-menu {display: table-cell; 
      text-align: center;
       font-size: 75%;
     font-weight: bold;
         padding: 0 5px;}

.f-menu-img {width: 70%;
             height: 70%;}

}

/*--
  pc
  --*/

@media print, screen and (min-width: 769px) {


.hh {height: 600px;}

.logo-st {padding-top: 200px;}

.logo1-st {width: 25%;
          height: 25%;}

.logo2-st {width: 18.5%;
          height: 25%;}

.logo3-st {width: 15.5%;
          height: 25%;}

.logo-s {padding-top: 225px;}

.logo1-s {width: 10%;
         height: 10%;}

.logo2-s {width: 7.6%;
         height: 10%;}

.logo3-s {width: 6.4%;
         height: 10%;}

.logo-f,.logo-n {padding-top: 35px;
                      margin: 0 0 5px;}

.logo1-f,.logo1-n {width: 18%;
                  height: 18%;}

.logo2-f,.logo2-n {width: 13.4%;
                  height: 18%;}

.logo3-f,.logo3-n {width: 11%;
                  height: 18%;}

.menu-s {font-size: 500%;
        margin-top: 0;
       padding-top: 5px;}

.menu-f {font-size: 350%;
       padding-top: 150px;}

h3 {font-size: 150%;}

h4 {font-size: 130%;}

section {font-size: 80%;
           padding: 0 180px;}

.top {font-size: 120%;
          line-height: 35px;}

.onlinestore {width: 25%;
             height: 25%;}

#point-img {width: 12%;
           height: 12%;}

#point {margin: 0px 70px;
       padding: 10px 20px;}

.coordinator {display: table-cell; 
                width: 50%;
              padding: 10px;
       vertical-align: top;}

figcaption { right: 25%;
            bottom: 15%;
            height: auto;}

#order {line-height: 20px;}

.order        {display: table-cell;
                border: 1px solid #364047;
                 width: 120px;
                height: 120px;
      background-color: #f0f6da;
 -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
         border-radius: 75px;}

.order img {width: 65%;
           height: 65%;
      padding-top: 20px;}

.order-titlle {display: block;
           font-weight: bold;
            text-align: center;
             word-wrap: break-word;}

.order-caption {text-align: left;
                margin-top: 10px;
                     width: 120px;}

.order-arrow {display: table-cell;
       vertical-align: top;
              padding: 0 5px;}

.order-arrow img {width: 32px;
                 height: 32px;
             margin-top: 45px;}

.dlh dt {float: left;
       padding: 10px 0 10px 20px;
         width: 150px;
         clear: both;}
    
.dlh dd {margin-left: 170px;
             padding: 10px 20px 10px 0;}

#coordinate-img {width: 25%;
                height: 25%;}

.f-menu {display: table-cell; 
      text-align: center;
       font-size: 80%;
     font-weight: bold;
         padding: 0 20px;}

.f-menu-img {width: 55%;
             height: 55%;}

}