* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

html, body { height: 100%; }

body {
    margin: 0;
    padding: 0;
    color: #000;
    font-family: 'Yu Mincho Demibold','Hiragino Mincho Pro',serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* ブラウザ側で自動調整しない */
    -webkit-font-smoothing: antialiased; /* アンチエイリアス */
    overflow-x: hidden;
    }

body:after {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #d8b986;
  background-image: linear-gradient(45deg, #d8b986 19%, #fff 100%);
  z-index: -1;
  }


/* --------------------------------------------------------------------------------- ★ a */


a { text-decoration: none; }

a:visited { color: #f69; }

a:link { color: #f69; }

a:hover { color: #fff; }

.active { color: #f69; }

.links a:link,
.links a:visited { color: #473529; }

.links a:hover { color: #f69; }

.item a:visited { color: #473529; }

.item a:link { color: #59483e; }

.item a:hover { color: #f69; }

img { max-width: 100%; height: auto; border: none; vertical-align: bottom; } /* DIV内で画像の下にできる隙間をなくす */

a:hover img { opacity: 0.3; filter: alpha(opacity=30); transition: 0.4s; }


/* --------------------------------------------------------------------------------- ★ PC・スマホ 表示／非表示 */


@media screen and (min-width: 640px) {

#sp { display: none; }

}

@media screen and (max-width: 640px) {

#pc { display: none; }

}


/* --------------------------------------------------------------------------------- ★ p font */

p { margin: 0; }

/* --------------------------------------------------------------------------------- ★ li */

ol, ul { margin: 0; padding: 0; }

li { display: inline-block; max-width: 100%; vertical-align: top; }

.list { margin: 10px 0 40px 0; }

.list li {
  display: list-item;
  list-style-position: inside;
  padding-left: 1.5em;
  text-indent: -1.5em;
  text-align: left;
  }

#products .list { margin-top: 30px; }


/* --------------------------------------------------------------------------------- ★ h */


h1 { font-size: 150%; margin: 0 0 40px 0; text-align: center; }

h2 {  font-size: 120%; margin: 0 0 40px 0; }

h3 {  font-size: 130%; margin: 0 0 20px 0; }

h4 {  font-size: 130%; margin: 40px 0; text-align: center; }

h1, h2, h3, h4 { line-height: 1.5; }

h2, h3, h4 { letter-spacing: 0.1em; }


@media screen and (max-width: 640px) { 

h1 { font-size: 120%; }

h2 {  font-size: 100%; }

}

/* --------------------------------------------------------------------------------- ★ hr */


hr { border: 0; height: 1px; background-image: url('../img/line.gif'); clear: both; }

#access hr { margin: 10px 0; }

/* --------------------------------------------------------------------------------- ★ box */

.box,
.bxsliderbox,
article { max-width: 1060px; margin: auto; padding: 0 20px; }

.box { padding: 40px 20px; }

.box2 { width: 100%; padding: 40px 20px; }

.box3 { max-width: 1060px; margin: auto; padding-top: 40px; font-size: 150%; text-align: center; }

@media screen and (max-width: 640px) { 

.box3 { font-size: 100%; }

}


/* --------------------------------------------------------------------------------- ★ Flexbox */


article {	display:flex; padding-top: 40px; }

@media screen and (min-width: 640px) { 

article {	flex-direction: row; } /* コンテンツの配置を設定 */

main { order: 2; }   /* コンテンツの順番を設定  */

aside {
order: 1;
width: 360px;
margin-right: 20px; }

}

@media screen and (max-width: 640px) {

article { flex-direction: column; padding: 0 20px; }
main { order: 1; }
aside { order: 2; }

}


/* --------------------------------------------------------------------------------- ★ logo */


.logo { 
 width: 100%;
 text-align: center;
 z-index: 99; }

.logo img { width: 280px; padding: 30px; }

@media screen and (max-width: 640px) { 

.logo { 
  height: 200px;
  }

.logo img { height: 200px; }

}


/* --------------------------------------------------------------------------------- ★ LR */

.center { text-align: center; }

.l { float: left; vertical-align: top; }

.r { overflow: hidden; }

#access .l { width: 160px; font-weight: bold; }

@media screen and (max-width: 640px) { 

.r { width: 100%;}

}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
  }


/* --------------------------------------------------------------------------------- ★ text */


.text p { margin-bottom: 30px; }

.bold { font-weight: bold; }


/* --------------------------------------------------------------------------------- ★ オンライン注文 */


@media screen and (min-width: 640px) {

.order { display: none; }

}

@media screen and (max-width: 640px) {

.order {
  border: 0;
  padding: 5px 10px; 
  background: #960;
  text-align: center;
}

.order a { display: block; color: #fff; }

}

/* --------------------------------------------------------------------------------- ★ news */


#news a:visited { color: #473529; }

#news a:hover { color: #f69; }

#news h1 { font-size: 120%; margin-bottom: 10px; text-align: left; line-height: 1; }

#news .l { margin-right: 20px; }

.ornament { margin-bottom: 20px; }

.ornament img { height: 80px; margin-right: 20px; }



/* --------------------------------------------------------------------------------- ★ item */


.item { margin: auto; padding-top: 60px; line-height: 1.5; text-align: center; }

.item-view { max-width: 1040px; }

.item li { width: 320px; padding: 10px; margin-bottom: 10px; }

.item img { height: 200px; margin-bottom: 20px; border: solid 3px #473529; }

.item span { background: #f69; color: #fff; padding: 5px; font-size: 60%; margin-right: 5px; }


@media screen and (max-width: 640px) {

.item { padding-top: 40px; letter-spacing: 0em; }

.item li { padding: 5px; }

}

.submit { width: 200px; height: 60px; margin-top: 20px; font-weight: bold; }

.item input {
   width: 10px;
   height: 10px;
   transform: scale(2);
   margin-right: 10px;
}


/* --------------------------------------------------------------------------------- ★ item 2 */


.item2 { margin-top: 20px; text-align: center; }

.item2 li { padding: 10px; }

.item2 img { width: 100px; margin-bottom: 10px; }


/* --------------------------------------------------------------------------------- ★ products */


#products { max-width: 1020px; margin: auto; padding: 40px 20px 0 20px; }

#products .main { width: 100%; }

#products h1 { margin: 40px 0; }

#products p { margin-bottom: 30px; }

#products .l { max-width: 600px; margin-right: 40px; }

#products .sample { margin-top: 10px; text-align: right; font-size: small; }

#products .imgs { margin-bottom: 30px; text-align: center; }

#products span { background: #f69; color: #fff; padding: 5px; font-size: 80%; margin-right: 5px; }

.note { font-size: 130%; }

@media screen and (max-width: 640px) {

#products { width: 100%; padding: 20px; }

#products .l { width: 100%; margin-right: ; }

}


/* --------------------------------------------------------------------------------- ★ price */


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

.price li { vertical-align: middle; }

.price input { padding: 5px 10px; cursor: pointer; }

.price a { display: block; padding: 15px 20px; background: #473529; color: #fff; border-radius: 3px; }

.price a:visited { color: #fff; }

.price a:hover { background: #f69; }


/* --------------------------------------------------------------------------------- ★ price2 */


.price2 { margin: auto; margin: 60px 0 20px 0; line-height: 1.5; text-align: center; }

.price2 li { width: 320px; padding: 10px; margin-bottom: 10px; }

.price2 img { height: 200px; margin-bottom: 20px; border: solid 3px #473529; }

@media screen and (max-width: 640px) {

.price2 { padding-top: 40px; letter-spacing: 0em; }

.price2 li { padding: 5px; }

}


/* --------------------------------------------------------------------------------- ★ buy */


.buy { display: inline-block; margin-top: 10px; padding: 15px 20px; background: #473529; color: #fff; border-radius: 3px; }

.buy:visited { color: #fff; }

.buy:hover { background: #f69; }


/* --------------------------------------------------------------------------------- ★ Google Calendar */


.calendar iframe { width: 100%; height: 400px; padding: 20px; background: #fff; }

@media screen and (max-width: 640px) {

..calendar iframe { width: 80%; margin-top: 20px; }

}

/* --------------------------------------------------------------------------------- ★ Table */


.data {
  width: 100%;
  margin: 30px 0;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-collapse: collapse;
  line-height: 1.5;
  }

.data th,
.data td {
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 10px;
  }

.data tr .m { background: #f1ebe8; }

.data tr .p { text-align: right; }

@media screen and (max-width: 640px) {

.data tr,
.data td { display: block; }
  
table td::before {
  content: attr(data-label);
  float: left;
  }
  
}


/* --------------------------------------------------------------------------------- ★ profile */


#profile img { height: 200px; margin-bottom: 20px; }

#profile .l { margin-right: 40px; line-height: 1.5; text-align: center; }

#profile .r { max-width: 700px; }

.profile { max-width: 1080px; margin: auto; }

.name { margin: 10px 0; font-size: 110%; letter-spacing: 0.5em; }

.job { font-size: 80%; letter-spacing: 0.1em; }

.name2 { font-size: 60%; letter-spacing: 0.2em; }

@media screen and (max-width: 640px) { 

#profile .l { width: 100%; margin: 0 0 40px 0; text-align: center; }

}


/* --------------------------------------------------------------------------------- ★ information */


.information { margin-bottom: 60px; }

.information img { margin-bottom: 30px; }

.information .l { margin-right: 40px; }

.information li {
  display: list-item;
  list-style: none;
  list-style-position: inside;
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 10px;
  text-align: left;
  }


/* --------------------------------------------------------------------------------- ★ map */


.map { width: 100%; height: 600px; border: 0; }

@media screen and (max-width: 640px) {

.map { height: 300px; }

}


/* --------------------------------------------------------------------------------- ★ gallery */


.gallery { margin: 40px 0; text-align: center; }

.gallery li { padding: 10px; }

@media screen and (max-width: 640px) {

#access .gallery img { width: 160px; }

}

/* --------------------------------------------------------------------------------- ★ frame */


.frame { border: solid 1px #ccc; margin: auto; padding: 40px; border-radius: 5px; }


/* --------------------------------------------------------------------------------- ★ button */


.btn { display: inline-block; border: solid 1px #f99; background: #f99; padding: 30px 40px; }

.btn:link { color: #fff; }

.btn:visited { color: #fff; }

.btn:hover { color: #f99; background: #fff; }

.btn2 { display: inline-block; border: solid 1px; padding: 20px 40px; }

.btn2:hover { border: solid 1px #f99; }


.btn3 { border-radius: 50%; margin-top: 5px; padding: 10px 0; color: #fff; background: #960; }

.btn3:hover { background: #f99; color: #fff; }


#accordion .btn4 { display: inline-block; margin-top: 10px; background: #f99; padding: 10px 20px; }

#accordion .btn4:link { color: #fff; }

#accordion .btn4:visited { color: #fff; }

#accordion .btn4:hover { background: #49372b; }


.more { display: inline-block; border: solid 1px; margin: 40px 0; padding: 15px 60px; }

.more:hover { color: #fff; border: solid 1px #f99; background: #f99; }


/* --------------------------------------------------------------------------------- ★ Links */


.links { width: 100%; padding: 40px 20px 60px 20px; color: #fff; background: #473529; text-align: center; }

.links img { margin-top: 20px; }

.links a:visited,
.links a:link,
.links a:hover { color: #fff; }


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


footer {
  margin-top: 30px;
  padding: 0 0 40px 0;
  border-bottom: solid 8px #473529; 
  text-align: center;
  z-index: 1;
  }

footer .r { text-align: left; }

.footer { max-width: 600px; margin: auto; }

.footer img { height: 140px; padding: 0 20px; }

.copy { 
  margin-top: 30px;
  font-size: small;
  line-height: 1;
  }



@media screen and (max-width: 640px) {

footer .l, footer .r { width: 100%; text-align: center; }

}



/* --------------------------------------------------------------------------------- ★ SNS */


.sns { text-align: center; }

.sns img { height: 30px; }

.sns li { padding: 10px; } 

.instagram-icon { position: relative; }

.instagram-icon img {
  position: absolute;
  top: 30px;
  left: 20px;
  }


/* --------------------------------------------------------------------------------- ★ ドロワー */


.check { display: none; }


/*  menu button */

.menu-btn { 
  position: fixed;
  display: block;
  top: 20px;
  right: 10px;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 100;
  }

.menu-btn .bar1,
.menu-btn .bar3 { 
  position: absolute;
  top: 0;
  right: 10px;
  width: 40px;
  height: 2px;
  background: #473529;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  }

.menu-btn .bar2 {
 position: absolute;
 top: 5px;
 right: 8px;
 opacity: 1;
 font-size: 12px;
 text-align: center;
 }

.menu-btn .bar3 { 
  top: 30px;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  }

/*  close button */

.check:checked ~ .menu-btn .bar1,
.check:checked ~ .menu-btn .bar3 { background: #fff; }
.check:checked ~ .menu-btn:hover span {  background: #f69; }

/* checked */

.check:checked ~ .gnav { 
  visibility: visible;
  opacity: 1;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  }

.check:checked ~ .menu-btn .bar1 { 
  width: 45px;
  top: 0;
  right: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
 }

.check:checked ~ .menu-btn .bar2 { opacity: 0; }

.check:checked ~ .menu-btn .bar3 { 
  width: 45px;
  top: 30px;
  right: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  }

@media screen and (min-width: 640px) {

.menu-btn { display: none; }

}

@media screen and (max-width: 640px) {

.gnav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow-y: auto;
  opacity: 0;
  z-index: 90;
  }

}

/* --------------------------------------------------------------------------------- ★ Navi */

.navi,
.f-navi {
  width: 100%;
  height: 65px;
  margin-bottom: -11px;
  z-index: 99;
  }

@media screen and (max-width: 860px) {

.navi,
.f-navi {
  height: 105px;
  }
  
}

@media screen and (max-width: 640px) {

.navi { height: 100%; }

}

/* --------------------------------------------------------------------------------- ★ f-navi */


.f-navi { margin-top: 40px; }

@media screen and (max-width: 640px) {

.f-navi { height: 410px; margin-top: 40px; }

}


/* --------------------------------------------------------------------------------- ★ Back */


.back { display: block; margin: 60px 0 50px 0; padding: 20px 0; }

.back .arrow {
  width: 40px;
  height: 40px;
  margin: auto;
  border-left: 2px solid #473529;
  border-bottom: 2px solid #473529;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 0.4s;
  }

.back:hover > .arrow {
  border-left: 2px solid #f69;
  border-bottom: 2px solid #f69;
  }

/* --------------------------------------------------------------------------------- ★ wrapper */


.wrapper-slideshow { height: 600px; overflow-x: hidden; }

.wrapper-bg { height: 400px; overflow-x: hidden; }
 
 @media screen and (max-width: 640px) { 

.wrapper-slideshow { height: 400px; }

.wrapper-bg { 
 height: 200px;
 overflow-y: scroll;
 -ms-overflow-style: none;
 scrollbar-width: none;
 }

.wrapper-bg::-webkit-scrollbar { display: none; }

}


/* --------------------------------------------------------------------------------- ★ bg */


.bg-chef { background: url('../img/bg-chef.jpg') repeat; }
.bg-access { background: url('../img/bg-access.jpg') center center / cover no-repeat; }
.bg-products { background: url('../img/bg-products.jpg') center center / cover no-repeat; }
.bg-hime { background: url('../img/bg-hime.jpg') center center / cover no-repeat; }
.bg-bs { background: url('../img/bg-bs.jpg') center center / cover no-repeat; }
.bg-crayon { background: url('../img/bg-crayon.jpg') center center / cover no-repeat; }
.bg-frozen { background: url('../img/bg-frozen.jpg') center center / cover no-repeat; }

.bg-chef,
.bg-access,
.bg-products,
.bg-hime,
.bg-bs,
.bg-crayon,
.bg-frozen { width: 100%; height: 400px; }

.img-wrap-bg p {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  color: #fff;
  font-size: 180%;
  letter-spacing: 0.5em;
  text-shadow: 1px 1px 1px #000;
  text-align: center;
  }

@media screen and (max-width: 640px) { 

.bg-chef { background: url('../img/bg-chef_s.jpg') center center / cover no-repeat; }
.bg-access { background: url('../img/bg-access_s.jpg') center center / cover no-repeat; }
.bg-products { background: url('../img/bg-products_s.jpg') center center / cover no-repeat; }
.bg-hime { background: url('../img/bg-hime_s.jpg') center center / cover no-repeat; }
.bg-bs { background: url('../img/bg-bs_s.jpg') center center / cover no-repeat; }
.bg-crayon { background: url('../img/bg-crayon_s.jpg') center center / cover no-repeat; }
.bg-frozen { background: url('../img/bg-frozen_s.jpg') center center / cover no-repeat; }

.bg-chef,
.bg-access,
.bg-products,
.bg-hime.
.bg-crayon,
.bg-frozen { height: 200px;  }

.img-wrap-bg p { letter-spacing: 0.1em; }

}


/* --------------------------------------------------------- ★ アコーディオンボタン */


#accordion p,
#accordion ul { margin-bottom: 30px; }

#accordion label {
 display: block;
 padding: 20px;
 margin: 5px 0;
 color: #fff;
 background: #48362a;
 cursor: pointer;
 font-weight: bold;
 transition: 0.4s;
 }

#accordion label:hover { background: #ff6799; }

#accordion input[type="checkbox"].on-off { display: none; }

#accordion input[type="checkbox"].on-off + div { height: 0; overflow: hidden; transition: .3s ease; }

#accordion input[type="checkbox"].on-off:checked + div { height: auto; padding-top: 30px; }

#accordion-in input[type="submit"],
#accordion-in input[type="button"] { margin: 10px; padding: 10px 20px; }

/* ラジオボタン */

#accordion-in input[type="radio"],
#accordion-in input[type="checkbox"] {
   -webkit-transform: scale(1.5);
   transform: scale(1.5);
   margin-right: 0.5em;
   }
   

/* -------------------------------------------------------- WOW */


.animated {
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both;
    }
 
 
/* -------------------------------------------------------- wow img-wrap */


.img-wrap,
.img-wrap-bg {
  position: relative;
  height: 100%; 
}

.img-wrap2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #fff;
  z-index: 1;
  animation: img-animation 1s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes img-animation {
 100% { transform: translateX(100%); }
}


/* -------------------------------------------------------- wow FadeInLeft */


.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

@keyframes fadeInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


/* -------------------------------------------------------- wow FadeInRight */


.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

@keyframes fadeInRight {
    0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


/* -------------------------------------------------------- wow FadeInUp */


.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/* -------------------------------------------------------- wow FadeInDown */


.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* -------------------------------------------------------- wow Horizon */


.horizon { position: relative; padding-bottom: 40px; }

.horizon-l,
.horizon-l2,
.horizon-r,
.horizon-r2 { position: absolute; height: 1px; }

.horizon-l,
.horizon-r { background-color: #1c2651; }

.horizon-l2,
.horizon-r2 { background-color: #fff; }

.horizon-l,
.horizon-l2 { animation: horizon-l 1.5s forwards; }

.horizon-r,
.horizon-r2 { animation: horizon-r 1.5s forwards; }

@keyframes horizon-l {
    0% { opacity: 0; width: 0; left: 50%; }
  100% { opacity: 1; width: 50%; left: 0; }
  }

@keyframes horizon-r {
    0% { opacity: 0; width: 0; right: 50%; }
  100% { opacity: 1; width: 50%; right: 0; }
  }




#inst{
	text-align : center;
	font-size : 18px;
	margin : 30px auto;
}

#inst img{
	width : 40px;
	margin-right : 10px;
}