@charset "UTF-8";
/* CSS Document */

html{
font-size: 62.5%; /*16px*62.5%=10px*/
}

body{
  color: #6C6C6C;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem; /*とりあえず16pxにしておく*/
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  }

main,footer{
    text-align:center;
}

main{
  padding-bottom: 68px;
}

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

h2{
  padding: 50px 0;
}

/*h2>img{
  max-width: 332px;
  height: auto;
}*/



/*--------------------
PC版の際には改行なし
---------------------*/



.br-reverse{
  display: none;
}




/*--------------------
↑↑↑↑↑修正するのを忘れない
---------------------*/

/*--------------------
layout,background
---------------------*/


.section-footer{
  padding: 20px 0;
}


.about-message .section-footer{
   padding: 20px 30%;
}

/*font調整*/
.message{
font-family: a-otf-ud-reimin-pr6n, sans-serif;
font-style: normal;
font-weight: 300;
line-height: 2.0;
}

h3{
  font-family: dnp-shuei-mincho-pr6n,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2.2rem;
  color: #7E6A2B
}

.lead{
  font-family: dnp-shuei-mincho-pr6n,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.1rem;
  color: #000000
}


.text{ 
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.0rem;
  line-height: calc(15 / 10);

}

.text:last-of-type{
  padding: 15px 0 0;
}

.message-text{ 
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 2.0;
  color: #000;
  padding-top: 20px;
}




/*--------------------
loading画面設定
---------------------*/

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#FBF8F4;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:260px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*--------------------
header
---------------------*/

.header{
  position: absolute; /*＊＊＊＊＊PC版の場合注意＊＊＊＊＊*/
  top: 0;
  left: 0;
  width: 100%;
  padding:  15px 15px 10px;
  z-index: 50;
}


.navigation{
  display: none;
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  z-index: 100;
  width:100%;
  height: 120%;
  padding: 120px 0 150px;
  background-color: rgba(255,255,255,0.97);
  
}

.nav-item{
  margin-bottom: 50px;
}

.nav-item>a{
  font-size: 1.4rem;
  font-family: dnp-shuei-mgothic-std,sans-serif;
  text-transform: uppercase;
}

.btn-trigger{
  -webkit-appearance:none;
  appearance:none;
  position: fixed;
  top: 15px;
  right: 12px;
  z-index: 110;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(193,176,176,0.80);
  /* #D0B1B1  #D0B1B1*/

  border-radius: 2px;
  overflow: hidden;
}


.btn-trigger span{/*.btn-triggerの中にあるspanタグ*/
  position: absolute;
  display: block;
  width: 24px;
  height: 1px;
  left: 8px;
  background-color: #fff;
  transition: all 0.5s;
}

.btn-trigger span:first-of-type{
   top:10px; 
}

.btn-trigger span:nth-of-type(2){
  top:20px;
}
.btn-trigger span:last-of-type{
  bottom: 10px;
}

.btn-trigger.active span:first-of-type{
  transform: rotate(45deg);
  top: 20px;
  }

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

.btn-trigger.active span:last-of-type{
  transform: rotate(-45deg);
  bottom: 19px;
  }



/*ボタン*/

.btn{
  position: relative;
	overflow: hidden;
  display: inline-block;
  padding: 6px 28px;
  background-color: #BC8F8F;
  font-size: 1.2rem;
  text-transform: none;
  border-radius: 28px;
  transition: ease .2s;    /*アニメーションの指定*/   
  will-change: transform;
}


/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #fff;

}

.btn:hover span{
	color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#6f3f3f;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
    border-radius: 28px;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
    border-radius: 28px;
}

.about-message .btn{
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-top: 18px;
  background-color: #BC8F8F;
  color: #fff;
  font-size: 1.2rem;
  text-transform: none;
  border-radius: 28px;
}

/*-----------------------------------------
トップページ
-------------------------------------------*/


/*--------------------
ファーストビュー
---------------------*/

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  z-index: 5;
}



/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;

    /*全体の高さ*/
	height:80px;
  z-index: 6;
  bottom: 0px;
  right: 50%;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 40px;
	background: #B59595;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 2.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:80px;
		opacity: 1;
	}
	100%{
		height:0;
		top:126px;
		opacity: 0;
	}
}

.header-img-text{
  position: absolute;
  width: 280px;
  z-index: 6;
  right: 0;
  left: -40px;
  bottom: 75px;
  margin: auto;
}


.container{
  position: relative;
  z-index: 3;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
  padding: 40px 0 0;
}

#firstview-text{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  z-index: 3;
  right: 10%;
  top: 160px;
  font-feature-settings: initial;

}

/*--------------------
topメッセージ
---------------------*/

.about-message{
  position: relative;
  /*background-color: darkorange;*/
  width: 375px;
  height: 365px;
  margin: auto;
}


.img1{
    width: 290px;
    height: 323px;
    background: #FBF8F4;
    position: absolute;
    z-index: 0;
    left: 55px;
    top: 43px;
}

.img2{
    border: solid 1px #B59595;
    background-color: transparent;
    width: 271px;
    height: 294px;
    left: 37px;
    top:13px;
    position: absolute;
    z-index: 1;
}

.about-message-text{
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 2;
}

/*--------------------
  ふわっ（その場で）
---------------------*/

.fadeIn{
animation-name: fadeInAnime;
animation-duration:3s;/*ゆっくり出現するため数値変更*/
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}




/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
  animation-name:blurAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  }

  to {
  filter: blur(0);
  transform: scale(1);
  }
}



/*--------------------
 トップページインスタ
---------------------*/

.insta-bg{
  position: relative;
  width: 370px;
  height: 400px;
  margin: auto;
}

.snapwidget{
  position: absolute;
  width: 310px;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 4;
}

.img3{
    width: 364px;
    height: 381px;
    background: #FBF8F4;
    position: absolute;
    z-index: 0;
    left: 8px;
    top: 0px;
}

.img4{
    border: solid 1px #B59595;
    background-color: transparent;
    width: 350px;
    height: 343px;
    right: 20px;
    bottom: -10px;
    position: absolute;
    z-index: 1;
}



/*メニューエリア*/
.menu-list{
  padding: 0 20px;
}

.menu-innner{
  background-color: #FBF8F4;
  max-width:100%; 
  margin: 0 auto 35px;
  width: fit-content;
}

.menu-innner:last-of-type{
  margin-bottom: 0px;
}



/*--------------------
about
---------------------*/


.bg-concept{
  width: 335px;
  height: 249px;
  background: #FBF8F4;
  position: relative;
  margin: 40px auto 0;
}

.in-concept{
  position: absolute;
    top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.in-concept-text{
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #000000;
  font-size: 1.4rem;
  white-space: nowrap;
  line-height: 3.0rem;
}

.concept>h3{
  margin-top: -18px;
}


.owner-message{
  position:relative;
  /*background-color: #DF9B11;*/
  width: 300px;
  height: 246px;
  margin: -15px auto 0;
}

.owner-photo{
  position: absolute;
  width: 145px;
  height:145px;
  border-radius:50%;
  object-fit: cover;
  border: solid 0.3px #888888;
  bottom: 55px;
}

.not-center{
  position: absolute;
  text-align: left;
}

.owner-name{
  width: 308px;
  height: 36px;
  background-color: #FBF8F4;
  position: relative;
  margin: auto;
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 500;
  font-style: normal;

}

.name-jp{
  position: absolute;
  color: #000000;
  font-size: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 10px;
}

.name-en{
  position: absolute;
  right: 20px;
  color: #E6E6E6;
  font-size: 2.0rem;
  opacity: 0.5;
  top: 50%;
  transform: translateY(-50%);
  }

.owner-detail{
  text-align: left;
  width: 270px;
  margin: auto;
}

.owner-license{
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #6F3F3F;
  font-size: 1.0rem;
  padding:5px 0;
}

.owner-title{
  font-family: dnp-shuei-mgothic-std, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #6C6C6C;
  font-size: 1.0rem;
}


/*--------------------
menu
---------------------*/
.slickslider img{
  height: auto;
  margin: auto;
}

.menu-lead{
  font-family: dnp-shuei-mincho-pr6n,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.2rem;
  color: #000000;
  padding: 24px 0 ;
}

.menu-note{
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0rem;
  color: #919090;
  padding: 20px 0 0;
  line-height: calc(15 / 10);
}

.text span{
  color:#BC8F8F;
}

.bust>img{
    width: 39px;
    position: relative;
    top: -3.2px;
    padding-right: 1px;
    bottom: auto;
}
.menu-note span{
  color:#BC8F8F;
}

.menu-detail{
  max-width:100%; 
  margin: 0 auto 35px;  
  overflow: hidden;
}

.menu-detail:last-of-type{
  margin-bottom: 0;
}

.menu-detail>h3{
  padding-top: 60px;
}

.menu-detail .section-footer{
  padding-bottom: 0;
}

/*--------------------
access
---------------------*/

.googlemap iframe{
  margin:auto;
  width: 90%;
  max-width: 720px;

}

.wrapper{
  width: 320px;
  height: 285px;
  background-color: #FBF8F4;
  margin: 64px auto 40px;
  padding-top: 20px;
  
}

.info-item{
  font-family: dnp-shuei-mgothic-std,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.0rem;
  line-height: calc(15 / 11);
  display: flex;
  margin-bottom: 15px;
}

.info-title{
  color: #6F3F3F;
  flex: 0 0 auto;
  width: 45px;
  margin-right: 28px;
  margin-left: 50px;
  text-align: left;
}

.info-detail{
  flex: 1 1 auto;
  text-align: left;
  padding:0 10px;
}

.instagram-media {
    margin: 30px auto !important;
}

.right{
  text-align: right;
  padding-right: 50px;
}

.car{
  padding: 0 20px 13px;
}




/*--------------------
footer
---------------------*/

.footer{
  padding: 50px 0 70px;
/*  margin-top: 68px;*/
  background-color: #FBF8F4;
}

.footer-nav{
  display: none;
}

.fotter-sns{
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

.fotter-text{
  font-size: 1.1rem;
  line-height: 2.0;
  color: #707070;
  padding-bottom: 20px
}

.copyrights{
  font-size: 1.0rem; 
}


.page-top {
    z-index:2;
    position: fixed;
    bottom: 65px;
    right: 18px;
}

.page-top img {
    width: 10px;
    height: auto;
}

.cv-fixed{
  position: fixed;
  bottom: 0; 
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  font-size: 1.4rem;
  z-index: 4;

}

.cv-fixed>img{
  display: block;
}

.cv-fixed>div{
  width: 100%;
}

.cv-line{
  background-color: #F1F1F1;
  color: #6F3F3F;
  text-align: center;
  padding: 22px 0 ;
  display: block;
  width: 100%;
}


.cv-hotpepper{
  background-color: #BC8F8F;
  color: #fff;
  text-align: center;
  padding: 22px 0 ;
  display: block;
  width: 100%;

}
  
.cv-icon{
   vertical-align: -6px;
}