@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400&display=swap');
/* ===========================================

本体

============================================*/
body {
  width:100%;
  font-family: 'EB Garamond','Noto Serif JP',"游明朝体","Yu Mincho",'YuMincho', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 0 auto;
  list-style: none;
  position: relative;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  margin: 0;
  background-color: #f2f0f0;
    }
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fade {
  　opacity : 0;
  　transform : translate(0, 45px);
  　transition : all 300ms;
  }
  
  .fade.effect-scroll {
  　opacity : 1;
  　transform : translate(0, 0);
  }
.wrapper {
  width:100vw;
  height: 100vh;
}
a {
  text-decoration: none;
  color: #3E3A39;}
a:hover {
  opacity: 0.9;
  transition:transform 0.3s ease;
}
h2 {
  font-weight: 400;
  letter-spacing: 0.2em;
}

.col-form-label, label {
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.mail,.time {
  display: flex;
  flex-direction: column;
}
.mail_data, .time_data, .area {
  padding: 6px 0 3px;
}
.timegroup {
  margin-top: -20px;
}
.lunch_only {
  display: none;
}
.cafe_only {
  display: none;
}
.hanko_only {
  display: none;
}

.area {
  display: none;
}
.area.show {
  display: block;    
}
.btn {
padding: 12px 0;
}
.btn-block  {
  width: 50%;
  margin: 10px auto 0;
}
.btn-primary {
  color: #fff;
  background-color: #372424;
  border-color: #372424;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #eb5c4b;
  border-color: #eb5c4b;
}
.btn-primary:hover {
    color: #fff;
    background-color: #eb5c4b;
    border-color: #eb5c4b;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(92 36 27 / 50%);
}
/*
.c-fade {
  display: none;
}*/
  
/* ===========================================
SP
============================================*/
@media screen and (max-width:1023px){
  body {
    font-family:'EB Garamond','Noto Serif JP',"游明朝", 'YuMincho', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 15px;
    color: #372424;
    letter-spacing: 0.2em;
    line-height:  2em;
    background: linear-gradient(to bottom,#eb5c4b 0px, #eb5c4b 150px, #f2f0f0 150px, #f2f0f0 100%);
  }
  h3,h4,h5{
    position: relative;
 

  }
  h3 {
    font-size: 16px;
    margin: 0 auto;
    width: 86%;
    line-height: 1.6em;
    max-width: 670px;

  }
  h4 {
    font-size: 14px;
  }
  .emphasis {
    font-size: 20px;
    line-height: 1.7em;
  }
  .container_form {
    margin-top: 50px!important;
  }
  .header {
    position: relative;
  }
  #c-top {
    display: none;
  }
  #c-calender{
    display: none;
  }
  .c-img__pc {
    display: none;
  }
  #p-news {
    position: relative;
    width: 86%;
    margin: 110px auto 0;
    color: #372424;
    font-size: 14px;
    letter-spacing: 0.2em;
  }
  .news_date {
    width: 135px;
    color: #f2f0f0;
    background-color: #372424;
    text-align: center;
  }
/*fv*/
#p-fv {
  background-color:#eb5c4b;
  width:100vw;
  height: 100vh;
	position: relative;
}
.fv__logo {
  width: 100vw;
  margin: 0 auto;
 padding-top: 60px;
 text-align: center;
}
.fv__logo img {
  width: 44%;
  z-index: 60;
  padding-top: 2vh;
}
#scheduled_timet {
  width: 121%;
  }
.time_data {
  width: 120%;
}
.container {
  max-width: 764px;
  padding: 0 30px;
}
.time_label {
  width: 350%;
}
.col-sm-2 {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}
.form-controll {
  width: 121%;
}
.fv__illust02 {
  width: 100vw;
  height: 21vh;
  background-color: #f2f0f0;
  margin-top: -10vh;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 20;
}
.fv__illust02 img {
  width: 86%;
  text-align: center;
  margin: 0 auto;
  padding-top: 145px;
}
.fv__photo {
  display: none;
}
.fv__illust02__sp {
  width: 100vw;
  text-align: center;
  margin: 0 auto;
}
.fv__illust02__sp img {
  width: 86%;
  text-align: center;
  margin: 0 auto;
}

/*about*/
#p-about {
  background-color: #f2f0f0;
  width:100vw;
  background-repeat: no-repeat;
  padding-top: 100px;
  position: relative;
}
.about__upper {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
  height: 220px;
}
.p-about__title img{
 width: 50%;
}
a#about__more:hover {
  opacity: 1;
  background-color: #c30d23
}
#about__more {
 -ms-writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
 font-size: 13px;
 line-height: 2.2em;
letter-spacing: 0.05em;
width: 30px;
height: 98px;
padding: 30px 2px 0 0;
color: #f2f0f0;
background-color: #eb5c4b;
}

/*hanko*/

.hanko__upper {
  display: flex;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 30px;
}
.p-hanko__title img{
 width: 50%;
}
a#hanko__more:hover {
  opacity: 1;
  background-color: #c30d23
}
#hanko__more {
 -ms-writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
 font-size: 13px;
 line-height: 2.2em;
letter-spacing: 0.05em;
width: 30px;
height: 98px;
padding: 30px 2px 0 0;
color: #f2f0f0;
background-color: #eb5c4b;
}
 .container_form {
   margin-top: 30px!important;
 }
  .mb-30{
    margin-bottom: 30px;
  }
  .pb-30 {
    padding-bottom: 30px;
  }
  .mb-50 {
    margin-bottom: 50px;
  }
  .pt-30 {
    padding-top: 30px;
  }
  .pt-40 {
    padding-top: 40px;
  }
  .pt-50 {
    padding-top: 50px;
  }
  .pt-100 {
    padding-top: 100px;
  }
  .pb-50 {
    padding-bottom: 50px;
  }
  .b--30 {
    margin-bottom: -30px;
  }
  .logo__sub {
    display: none;
  }
  .header {
    margin-bottom: -500px;
  }
/*profile*/
#profile  {
  margin-top: 160px;
  position: relative;
  
}

#p-profile{
  width:100vw;
  background-color: #f2f0f0;
}
.about__upper{
  display: flex;
  justify-content: center;
}

.top-title {
  width: 50%;
}
.top-img {
  width: 210px;
  height: 351px;
  margin-top: -200px;
}
.about__upper {
  margin-bottom: 20px;
}
.about__upper h2 {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 1.3em;
  padding-left: 10px;
  height: 500px;
}

#profile h4 {
  margin: 0 auto;
  font-weight: 500;
  
}
.profile__lower {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
}
.profile__lower p {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 14px;
  margin: 0 auto;
}

.p-profile__photo  {
  width: 100vw;
  margin: 0 auto;
  text-align: center;
  margin-top: 50px;
}

.p-profile__photo img {
  width: 86%;
 }

 .p-profile__illust {
  text-align: center;
  margin: 0 auto;
  height: 60px;
 }
 .p-profile__illust img {
  width: 20%;
  text-align: center;
  margin: 0 auto;
 }
 .c-profile__line {
  width: 72%;
  height: 1px;
  margin: 0 auto;
  background-color: #372424;
}
.p-about__photo02 {
  display: none;
}
.cafe__illust {
  padding-top: 15px;
  width: 20%;
  margin: 0 auto;
}
.cafe__illust img {
  width: 20%;
  margin: 0 auto;}
/* hanko__process */
.hanko__process {
  display: flex;
  flex-direction: row-reverse;
}
.hanko__process__title {
  width: 15vw;
}
.hanko__process__inner {
  width: 85vw;
}
.hanko__ttl {
  width: 50%;
  
}
.hanko__process__inner h2 {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  margin: 0 auto;
  color: #eb5c4b;
  font-size: 20px;
  margin: 0 0 0 0;

}
.hanko__process__inner p ,.process__inner__lower small {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  color: #372424;
}
.hanko__process__inner h3 {
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.2em;
  line-height: 2em;
  margin: 0 15px;
}

/* hanko__process */
.hanko_ph {

  display: none;
}
.process__inner__upper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.process__inner__lower {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
.process__inner__lower a {
  color: #c30d23;
}
.hanko__process__inner img {
  width: 80vw;
}
.hanko__process__photo {
  margin: 0 0 0 5vw;
  text-align: center;
}
.process__inner__lower small {
  font-size: 12px;
  height: 250px;
}


/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
top: 0;
width:100%;
  height: 100vh;
}

/*丸の拡大*/
.circle-bg{
  position: fixed;
z-index:3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
animation: bgchange 40s ease infinite;/*変化の時間を変更したい場合は40sの部分を好きな時間に変更*/
  /*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
  top:calc(50% - 50px);/*50%から円の半径を引いた値*/
  left:calc(50% - 50px);/*50%から円の半径を引いた値*/
  transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
   display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*リストのレイアウト設定*/
#g-nav li{
text-align: center; 
list-style: none;
}

#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
#scheduled_timet {
  width: 121%;
}

.form-controll {
  width: 121%;
}
.time_data {
  width: 121%;
  
}
@media screen and (max-width:1000px) {
  h3 {
    width: 80%;
    max-width: 80%;
  }
  .container {
    max-width: 80%;
    padding: 0px!important;
  }
  #scheduled_timet {
    width: 121%;
  }
  
  .form-controll {
    width: 121%;
  }
  .time_data {
    width: 121%;
    
  }
}
@media screen and (max-width:900px) {
  h3 {
    width: 80%;
    max-width: 80%;
  }
  .container {
    max-width: 864;
    padding: 0px!important;
  }
  #scheduled_timet {
    width: 121%;
  }
  
  .form-controll {
    width: 121%;
  }
  .time_data {
    width: 121%;
    
  }
}
@media screen and (max-width:750px) {
  .container {
    max-width: 86%;
    padding-left: 20px;
    padding-left: 20px;
  }
  #scheduled_timet {
    width: 121%;
  }
  h3 {
    width: 86%;
    max-width: 86%;
  }
  .form-controll {
    width: 121%;
  }
  .time_data {
    width: 121%;
    
  }
}
@media screen and (max-width:700px) {
  .container {
    max-width: 85%;
    padding-left: 20px;
    padding-left: 20px;
  }
  #scheduled_timet {
    width: 121%;
  }
  h3 {
    max-width: 85%;
  }
  .form-controll {
    width: 121%;
  }
  .time_data {
    width: 121%;
    
  }
}
@media screen and (max-width:600px) {
  .container {
    max-width: 85%;
    padding-left: 20px;
    padding-left: 20px;
  }
  #scheduled_timet {
    width: 121%;
  }
  h3 {
    width: 85%;
    max-width: 85%;
  }
  .form-controll {
    width: 121%;
  }
  .time_data {
    width: 121%;
    
  }
}


@media screen and (max-width:575px) {
  #scheduled_timet {
    width: 100%;
  }
  
  .form-controll {
    width: 100%;
  }
  .time_data {
    width: 100%;
    
  }
}
@media screen and (max-width:500px) {
  #scheduled_timet {
    width: 100%;
  }
  
  .form-controll {
    width: 100%;
  }
  .time_data {
    width: 100%;
    
  }
  h3 {
    width: 82%;
  }
  .container {
    max-width: 96%;
    padding: 0 30px!important;
  }
}
@media screen and (max-width:768px) {
#g-nav li a{
padding:5px 10px;
}    
}
@media screen and (max-width:450px) {
.col-sm-2 {
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}
}
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  top:2vh;
  right:2vw;
  z-index: 888;
cursor: pointer;
  width: 50px;
  height:50px;
}

/*ボタン内側*/
.openbtn .openbtn-area{
  transition: all .6s;/*アニメーションの設定*/
width:50px;
height:50px;
}

.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background: #333;
  width: 45%;
}

.openbtn span:nth-of-type(1) {
top:15px;	
}

.openbtn span:nth-of-type(2) {
top:23px;
}

.openbtn span:nth-of-type(3) {
top:31px;
}

/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn.active .openbtn-area{
transform: rotate(360deg);
}

.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

.sp {
  display: none;
}

.pc {
  display: none;
}
/*map*/
.gMap,.p-map{
  max-width: 100vw;
  height:200px;
  margin: 0 auto;
  background-color:#f2f0f0;
  margin-top: 100px;
}
.p-map{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%)
}
.sp-none {
  display: none;
}
/*footer*/
footer {
  max-width: 100vw;
  background-color: #eb5c4b;
  margin: 0 auto;
}
.footer__left img {
  padding-top: 50px;
  width: 41%;
}
.footer__right img {
  width: 62%;
}
.footer__right {
  width: 100vw;
  text-align: center;
  margin: 0 auto;
}
.footer__right p {
  width: 86%;
  text-align: left;
  padding-top: 15px;
  font-size: 14px;
  margin: 0 auto;
  padding-bottom: 50px;
  letter-spacing: 0.2em;
}
.c-copy {
  font-size: 12.5px;
  letter-spacing: 0.2em;
}
}

@media screen and (max-width:1199px){
  .logo__sub {
    display: none;
  }
  #c-top{
    display: none;
  }
  .p-calender,.p-news{
    display: none!important;
  }
  #gloval-nav div{opacity:1;transform:translateX(0);transition:transform 1s ease,opacity .9s ease}
  #gloval-nav a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:10px 0;
    transition:color .6s ease}
    #gloval-nav a:hover{
      color:#666;transition:all .3s ease}
    ul{list-style:none}
    ul li{transition:transform .6s ease,opacity .2s ease}
    .c-navBtn{padding-left:500px}
    .open{overflow:hidden}
    .cp_fullscreenmenu{position:fixed;z-index:1;top:0;left:0;margin:0 auto;
  }
  .cp_fullscreenmenu .menu{
    position:fixed;
    top:0;
    left:0;
    visibility:hidden;
    width:100%;
    height:100%;
    pointer-events:none;
    outline:1px solid transparent}
  .cp_fullscreenmenu .menu,.cp_fullscreenmenu .menu>div{
    display:flex;
    overflow:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    align-items:center;
    justify-content:center;
    margin:0 auto;
  }
  .cp_fullscreenmenu .menu>div{
    width:150vw;
    height:150vh;
    transition:opacity .6s ease,visibility .6s ease;
    -webkit-transform:scale(0);
    transform:scale(0);
    text-align:center;
    color:#eee;
    background:#eb5c4b;
    flex:none;opacity:1;
    z-index: 9000;
  }
  .cp_fullscreenmenu .menu>div>ul{
    display:block;
    margin:0 auto;
    list-style:none;
    transition:opacity .4s ease;
    opacity:0;color:#eee;
    padding-inline-start: 0px;
    position: absolute;
    z-index:87}
  .cp_fullscreenmenu .menu>div>ul>li{
    font-size:18px;
    letter-spacing: 0.2em;
    display:block;
   margin: 5px 0 20px;
    padding:0;
    color:#c30d23;
    width: 100vw;
  }
  .cp_fullscreenmenu .menu>div>ul>li>a{
    position:relative;
    display:inline;
    cursor:pointer;
    transition:color .2s ease;
    margin:0 auto;
    padding:10px;
    letter-spacing: 0.5em;
    
  }
  #menu {
    margin: 20px auto 0;
    text-align: center;
  }
  .c-a__text {
    margin-bottom: 12px!important;
  }

  .c-insta,.c-fb,.c-mail,.c-webshop {
    margin-bottom: 13px!important;
  }
  .cp_fullscreenmenu .menu>div>ul>li.c-webshop {
    padding-bottom: 18px
  }
  .cp_fullscreenmenu .menu>div>ul>li>a.c-calender__sp {
    font-size: 15px;
    color: #f2f0f0;
    background-color: #372424;
    letter-spacing: 0.15em;
    padding: 9px 88px;
  }
  .cp_fullscreenmenu .menu>div>ul>li>a.c-news__sp {
    font-size: 15px;
    color: #f2f0f0;
    background-color: #372424;
    letter-spacing: 0.15em;
    padding: 9px 122px;
  }
  .cp_fullscreenmenu .menu>div>ul>li>a:hover{color:#c30d23;letter-spacing: 0.5em;}
  .cp_fullscreenmenu .menu>div>ul>li>a.c-calender__sp:hover,.cp_fullscreenmenu .menu>div>ul>li>a.c-news__sp:hover{opacity: 0.9; color: #eee;background-color: #c30d23;}
  .cp_fullscreenmenu .menu>div>ul>li>a:hover:after{width:100%}.cp_fullscreenmenu .menu>div>ul>li.menu__language{margin-top:2pc;margin-left:15px;}.null{padding-left:0px;margin-left:-1px;padding-right:10px;}.null,.null_pc{width:10px;height:5px}
  .cp_fullscreenmenu .toggle{position:fixed;z-index:9999;top:0;left:calc(100vw - 102px);width:75pt;height:100px;cursor:pointer;opacity:0}.cp_fullscreenmenu .toggle:checked+.hamburger>span{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
  .cp_fullscreenmenu .toggle:checked+.hamburger>span:after,.cp_fullscreenmenu .toggle:checked+.hamburger>span:before{top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
  .cp_fullscreenmenu .toggle:checked+.hamburger>span:after{opacity:0}
  .cp_fullscreenmenu .toggle:checked~.menu{visibility:visible;pointer-events:auto}
  .cp_fullscreenmenu .toggle:checked~.menu>div{transition-duration:.75s;-webkit-transform:scale(1);transform:scale(1)}
  .cp_fullscreenmenu .toggle:checked~.menu>div>ul{opacity:1; width: 100vw;}
  .cp_fullscreenmenu .toggle:checked~.menu>div>ul li:nth-of-type(1){transition-delay:.4s}.cp_fullscreenmenu .toggle:checked~.menu>div>ul li:nth-of-type(2){transition-delay:.6s}
  .cp_fullscreenmenu .toggle:checked~.menu>div>ul li:nth-of-type(3){transition-delay:.8s}.cp_fullscreenmenu .toggle:checked~.menu>div>ul li:nth-of-type(4){transition-delay:1}
  .cp_fullscreenmenu .toggle:checked:hover+.hamburger>span{-webkit-transform:rotate(225deg);transform:rotate(225deg)}
  .cp_fullscreenmenu .hamburger{
    position:absolute;
    z-index:9998;top:25px;
    left:calc(100vw - 85px);
    margin-left:100%;
    display:block;width:30px;height:5pc;padding:.5em 1em;cursor:pointer;border-radius:0 .12em .12em 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .cp_fullscreenmenu .hamburger>span{
    position:relative;
    top:2pt;
    left:18px;
    display:block;width:30px;
    height:2px;
    transition:all .4s ease;
    background:#372424;
  }
  .cp_fullscreenmenu .hamburger>span:after,.cp_fullscreenmenu .hamburger>span:before{
    position:absolute;
    z-index:1;
    top:-12px;
    display:block;
    width:100%;
    height:2px;content:'';
    transition:all .4s ease;
    background:inherit;}
  .cp_fullscreenmenu .hamburger>span:after{top:12px}
  .c-navBtn span:nth-of-type(1){top:0}.nav-button span:nth-of-type(2){top:1pc}.c-navBtn span:nth-of-type(3){bottom:0}.c-navBtn.active span:nth-of-type(1){-webkit-transform:translateY(16px) rotate(-45deg);transform:translateY(16px) rotate(-45deg)}
  .c-navBtn.active span:nth-of-type(2){opacity:0}.c-navBtn.active span:nth-of-type(3){-webkit-transform:translateY(-16px) rotate(45deg);transform:translateY(-16px) rotate(45deg)}
  #nav-toggle{z-index:8}#container{z-index:6}.c_null{width:100%;height:140px}.null_pc{width:10px;height:5px;padding-left:10px}.p-fv{width:100vw;height:100vh}.fv__image{text-align:center}
  .fv__image img{margin-top:35vh;width:65%}.p-container{padding-top:75pt}#c-header__height{margin-top:-75pt;padding-top:75pt}
  ul li{color:#363b3f;z-index:998;}footer{text-align:center;font-size:1.5rem;padding-bottom:85px}}
  @media screen and (min-width:521px){
      #p-about {
        margin-top: 40vw;
      }
  }
    @media screen and (min-width:500px){
      .fv__logo img {
        padding-top: 3vh;
        width: 20vw;
        z-index: 60;
      }
        .fv__illust01 img {
          width: 75vw;
        text-align: center;
        margin: 0 auto;
        }
    }
    @media screen and (min-width:730px){
      #p-about {
        margin-top: 60vw;
      }
      
      }

/* ===========================================
PC
============================================*/
@media screen and (min-width:1024px){
  body {
    width:100%;
    font-family: 'EB Garamond','Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","游明朝体","Yu Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    margin: 0 auto;
    list-style: none;
    position: relative;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    margin: 0;
    background: linear-gradient(to bottom,#eb5c4b 0px, #eb5c4b 200px, #f2f0f0 200px, #f2f0f0 100%);
    color: #372424;
      }
  @keyframes fadeIn {
      0% {opacity: 0}
      100% {opacity: 1}
  }
  @-webkit-keyframes fadeIn {
      0% {opacity: 0}
      100% {opacity: 1}
  }
  .wrapper {
    width:100vw;
    height: 100vh;
  }
  a {
    text-decoration: none;
    color: #3E3A39;}
  a:hover {
    opacity: 0.9;
    transition:transform 0.3s ease;
  }
  #wrapper {
    background-color:#f2f0f0;

  }
p {
  font-weight: 300;
}
  h3,h4,h5 {
    color: #372424;
    position: relative;
  }
  h2 {
    color: #372424;
  }
  h3 {
    font-size: 16px;
    letter-spacing: 0.2em;
    font-weight: 400;
    line-height: 1.6em;
    position: absolute;
    top:670px;
    padding-left: 3rem;
    }
  h4,h5 {
  font-size: 14px;
  line-height: 2.2em;
  letter-spacing: 0.2em;
  }
  .c-img__sp {
    display: none;
  }
  
   .pc-none {
     display: none;
   }
svg {
  position: fixed;
  top: 0px;
}

 /*about*/
 #profile {
  width: 900px;
  height: 800px;
  margin: 0 auto;
  position: relative;
}
.cafe p {
  line-height: 2.3em;
  letter-spacing: 0.15em;
  margin-right: 10px;
  color: #372424;
  vertical-align: text-top;
}
.about__upper h2 {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.2em;
  position: absolute;
  top: 370px;
  right: 120px;
  height: 200px;
}
#profile  > h3.class {
  position: absolute;
  top: 470px;
}
.emphasis {
  font-weight: 600;
  font-size: 20px;
  line-height: 2em;
}
.sp {
  display: none;
}
    
.mb-40 {
  margin-bottom: 40px;
}
.mr-40 {
  margin-right: 40px;
}
.container {
  position: relative;
 width: 900px;
 margin-bottom: 90px;
}
.container_form {
  margin-top: 0px!important;
}
#scheduled_timet {
width: 121%;
}
.time {
  width: 120%;
}
.cp_fullscreenmenu .menu>div>ul>li.c-mail {
  padding: 10px;
}
#p-news {
  position: relative;
  max-width: 1000px;
  height: 120px;
  margin: 0 auto;
  padding-bottom: 150px;
  color: #372424;
  font-size: 14px;
  letter-spacing: 0.2em;
}
.news_date {
  width: 135px;
  padding: 4px 0px 6px;
  color: #f2f0f0;
  background-color: #372424;
  text-align: center;
}
 /*fv*/
    
 .c-bg {
  z-index: 1;
  width: 100vw;
  height: 630px;
  background-color: #eb5c4b;
}

.ml--15 {
margin-left: -15px;
}
.pt-100 {
padding-top: 100px;
}
.pb-150 {
padding-bottom: 150px;
}
.form-control {
  color: #372424;
}

 /*map*/
.gMap,.p-map{
  max-width: 100vw;
  height:300px;
  margin: 0 auto;
}
.p-map{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%)
}
/*footer*/
footer {
  max-width: 100vw;
  height: 430px;
  background-color: #eb5c4b;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer__left {
margin-right: 100px;
}
.footer__right{
text-align: left;
}
footer p {
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #372424;
}
footer p {
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #372424;
  font-size: 15px;
}
.c-copy {
  font-size: 12.5px;
  color: #372424;
}

}
@media screen and (min-width:1200px){
  #c-top {
    position: fixed;
    right: 70px;
    bottom: 70px;
  }
  #c-top img {
    width: 27px;
  }
 
  #c-calender {
   
    color: #f2f0f0;
    background-color: #372424;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    position: fixed;
    left: 70px;
    bottom: 70px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 15px 5px;
  }
  
  #c-calender:hover {
    background-color: #c30d23;
    transition:transform 0.3s ease;
  }
 
  #wrapper:before ul li {
    color:#a3b2b9
  }
  .header {
    z-index:3;
    width:100vw;
    height:130px;
    color:#eee;
    font-size:21px;margin:0 auto;
    align-items:center;
    position:fixed;
    z-index: 5;
  }
  .p-header {
    display:flex;
    flex-direction:column;
  }
  .header__name {
    flex:none;
    width:auto;
  }
  .header__name img {
    margin-top:65px;
    margin-left:50px;
  }
  .c-calender__sp,.c-news__sp {
    display: none;
  }
  .cp_fullscreenmenu .hamburger,
  .cp_fullscreenmenu .hamburger>span,
  .cp_fullscreenmenu .hamburger>span:after,
  .cp_fullscreenmenu .hamburger>span:before,
  .cp_fullscreenmenu input.toggle{
    display:none
  }
  .c-menu__pc,.menu {
    display:block
  }
  .cp_fullscreenmenu .menu>div>ul>li {
    list-style: none;
    text-align: right;
    font-size:1pc;
    color:#372424;
    margin-bottom: 32px;
    font-size: 11px;;
  }
  .cp_fullscreenmenu .menu>div>ul>li>a{
    width: 30px;
    position:relative;cursor:pointer;
    transition:color .2s ease;
    margin:0 auto;
    padding:10px;
    z-index: 990;
    font-size: 11px;}
  .cp_fullscreenmenu .menu>div>ul>li>a:hover{
    color:#c30d23;
    opacity: 1;
  }
  .cp_fullscreenmenu .menu>div>ul>li>a:hover:after{width:100%}

  .cp_fullscreenmenu .menu>div>ul>li.menu__sns a img{padding-top:2px;padding-bottom:4px;margin-bottom:-6px;letter-spacing:.2em}
  .cp_fullscreenmenu .menu>div>ul>li.menu__sns a:hover{opacity:.7}
  .cp_fullscreenmenu .menu>div>ul>li.menu__insta a img{background-position:center;background:url(../images/common/insta_hover.png);background-repeat:no-repeat;background-attachment:fixed}
  .cp_fullscreenmenu .menu>div>ul>li.menu__fb a img{margin-left:0;background-position:center;background:url(../images/common/facebook_hover.png);background-repeat:no-repeat;background-attachment:fixed}



  .cp_fullscreenmenu .menu>div>ul{
    margin-top:70px;
    letter-spacing:.4em;
    float:right;
    margin-right: 57px;
    font-size: 1pc;
    z-index: 99;
  }
  .c-blank {
    margin-top: 78px;
}
    .c-calender__sp {
      display: none;
    }
    li.c-a__text.profile {
      font-size: 11px!important;
      color: #c30d23!important;
      text-align: center;
      padding: 0px 10px 5px;}

      .profile:before {
        content: '';
        position: absolute;
        right: 71px;
        bottom: -95px; /*下線の上下位置調整*/
        display: inline-block;
        width: 35px; /*下線の幅*/
        height: 1px; /*下線の太さ*/
        
        background-color: #c30d23; /*下線の色*/
     
      }
    
  #c-news {
   
    color: #372424;
    background-color: #fff;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    position: fixed;
    left: 115px;
    bottom: 70px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 15px 5px;
    height: 140px;
  }
  
  #c-news:hover {
    color: #f2f0f0;
    background-color: #c30d23;
    transition:transform 0.4s ease;
  }
}

@media screen and (min-width:1200px){
  body {
    width:100%;
    font-family: 'EB Garamond','Noto Serif JP', "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","游明朝体","Yu Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    margin: 0 auto;
    list-style: none;
    position: relative;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
    margin: 0;
    background: linear-gradient(to bottom,#eb5c4b 0px, #eb5c4b 350px, #f2f0f0 350px, #f2f0f0 100%);
      }
  @keyframes fadeIn {
      0% {opacity: 0}
      100% {opacity: 1}
  }
  @-webkit-keyframes fadeIn {
      0% {opacity: 0}
      100% {opacity: 1}
  }
  .wrapper {
    width:100vw;
    height: 100vh;
  }
  a {
    text-decoration: none;
    color: #3E3A39;}
  a:hover {
    opacity: 0.9;
    transition:transform 0.3s ease;
  }
  #wrapper {
    background-color:#f2f0f0;

  }

  h3,h4,h5 {
    color: #372424;
    position: relative;
   
  }
  h3 {
    font-size: 22px;
    letter-spacing: 0.2em;
    }
  h4,h5 {
  font-size: 14px;
  line-height: 2.2em;
  letter-spacing: 0.2em;
  }
  .c-img__sp {
    display: none;
  }
  
   .pc-none {
     display: none;
   }
svg {
  position: fixed;
  top: 0px;
}
 /*about*/

.top-img {
  position: absolute;
  top: 250px;
 
}
  
.about__upper {
  position: relative;
  width: 900px;
  height: 835px;
  margin: 0 auto 0px;
}
.about__upper h2 {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.2em;
  position: absolute;
  top: 470px;
  right: 120px;
  height: 200px;
}

.container {
  position: relative;
 width: 900px;
 margin-bottom: 90px;
 z-index: 998;
}


.menu__inner {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 40px;
}
.menu__drink {
  padding-right: 60px;
}
.cafe__small {
  width: 900px;
  margin: 0 auto;
  font-size: 12px;
  margin-top: 30px;
  margin-bottom: 150px;
}

#profile  > h3 {
  position: absolute;
  top: 760px;
  font-size: 16px;
}
.emphasis {
  font-weight: 600;
  font-size: 20px;
  line-height: 2em;
}
.container_form {
  margin-top: 60px!important;
}
.sp {
  display: none;
}
    
.mb-40 {
  margin-bottom: 40px;
}
.mr-40 {
  margin-right: 40px;
}
#sho__photo {
  position: relative;
  width: 900px;
  margin: 0 auto 120px;
  z-index: 901;
}
.sho__img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 998;
}
.sho__img img {
  padding-bottom: 30px;
  z-index: 999;
}
 /*map*/
.gMap,.p-map{
  max-width: 100vw;
  height:300px;
  margin: 0 auto;
}
.p-map{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%)
}
/*footer*/
footer {
  max-width: 100vw;
  height: 430px;
  background-color: #eb5c4b;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer__left {
margin-right: 100px;
}
.footer__right{
text-align: left;
}
footer p {
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #372424;
}
li.c-a__text.profile {
  font-size: 11px!important;
  color: #c30d23!important;
  text-align: center;
  padding: 0px 10px 5px;}
  .cp_fullscreenmenu .menu>div>ul>li.link {
    margin-right: 10px;
   color: #c30d23; /*下線の色*/
  }
  .link:before {
    content: '';
    position: absolute;
    right: 72px;
    bottom: -97px; /*下線の上下位置調整*/
    display: inline-block;
    width: 58px; /*下線の幅*/
    height: 1px; /*下線の太さ*/
    
    background-color: #c30d23; /*下線の色*/
  
  }
  .top-title {
    position: absolute;
    top: 0px;
    right: 0px;
    }
}

@media screen and (min-width:768px) and (max-width: 959px){

 
  .example-image-link:nth-last-of-type(1){
    margin-right:auto;
    margin-left:20px;
  }
  #profile h4 {
    padding-top: 50px;
  }
.p-profile__illust img {
    width: 18%;
    padding-top: 10px;
}
  
.cafe__illust {
  width: 13%;
}
  }
  @media screen and (min-width:700px) and (max-width: 959px){
    #p-news {
      padding-bottom: 5px;
    }
  }