/* reset */
/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	box-sizing: border-box;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}




input, select {
    vertical-align:middle;
}



body {
font-family: 'M PLUS 1p', sans-serif;
    -webkit-text-size-adjust: 100%;
    line-height: 1.6;
    font-size: 100%;
    /*color: #212121;*/
    background-color: #ffffff;
 color:#5D2428;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
body {font-size:82%;}
}
/* -------------end------------- */


ol, ul{
    list-style:none;
}
fieldset, img{
     border:0;
}

caption, th{
    text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var{
    font-style: normal; 
    font-weight: normal;
}

hr{
	display:none;
}

html {
	margin-bottom:1px;
	height:100%;
}

* {
    box-sizing: border-box;
}

/* line style　------------------------------*/
/* -----------------------------------------*/

a img{
	border-style:none;
}

a:hover {
opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* link style ------------------------------*/
/* -----------------------------------------*/
a:link {
	color: #212121;
	text-decoration: none;	
}
a:visited {  color: #212121;
	text-decoration: none;	}


a:active {
	color: #ccc;
	text-decoration: none; 
}

.link_line{
	text-decoration: underline;
}

img, video, object {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}


a:active, a:focus,input:active, input:focus{outline:0;}

img{
	width: 100%;
	height: auto;
}

iframe {
    vertical-align: bottom;
}

/*================================================
 *  ヘッダー
 ================================================*/
.header {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}


/* 大きい画面用の設定-------------- */
@media (min-width:1001px){
#top .header_outside{
z-index: 10000;
background-color: transparent;
position: absolute;
top:20px;
left: 0;
width: 100%!important;
}
    
#inside .header_outside{
z-index: 10000;
width: 100%!important;
background-color: #5D2428;
}
    

    
.header{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
    
.header_list{
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
}

    
.drawer_nav > li{
font-size: 88%;
 }
    
.drawer_nav > li:after {
content:"｜";
padding-right: 5px;
padding-left: 5px;
}
    
#inside .drawer_nav > li:after {
color: #FCEABB
}

    
.drawer_nav > li:last-child:after {
content:"";
padding-right: 0px;
}


#inside .drawer_nav > li a{
color: #FCEABB;
}
    
#top .drawer_nav > li a{
color: #5D2428;
}

}
/* -------------end------------- */


/* 小さい画面用の設定-------------- */
@media (max-width:1000px){
    
.header_outside{
z-index: 10000;
background-color: transparent;
position: absolute;
top:10px;
 left: 0;
width: 100%!important;
}
    
.header {
	padding-top: 10px;
	padding-bottom: 10px;
    padding-left: 10px;}
	
.header_list li:first-child img{
	width: 50%;
}

}
/* -------------end------------- */



/*================================================
 * グロナビ固定
 ================================================*/
@media screen and (min-width:1001px) {
.nav_fixed {
		position:fixed;
		top:0;
		left:0;
z-index: 10000;
}
    
#top .nav_fixed .header_outside
{
top: 0;
background-color: #5D2428;
color: #FCEABB;
    
  }
    
    
.nav_fixed .header_list{
   justify-content: center;
}

    
.nav_fixed .header{
top:0px;
 }
    
.nav_fixed .header_list{
padding-top: 10px;
padding-bottom: 10px;
}
 
.nav_fixed .header_list > li:last-child{
padding-right: 0px;
}
    
#top .nav_fixed .drawer_nav > li a{
color: #FCEABB;
}
}



/* ========================================

    ■ Header■ Keyv

======================================== */

.keyv_outside{
    background-image: url("../img/main_bg.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;}


#keyv {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

}

.main_car{position: absolute;
left:36%;
top:57.3%;
width: 64%;}

.bt_schedule{position: absolute;
left:0%;
top:86.6%;
width: 32%;}

.fluffy {
 animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.main_car{display: none;}

.bt_schedule{position: absolute;
left:0;
top:88.235%;
width: 100%;}
}
/* -------------end------------- */



/* ========================================

    ■ common_item

======================================== */
.contents{width: 98%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
word-wrap: break-word;
overflow-wrap: break-word;

}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.contents{width: 90%;}
}
/* -------------end------------- */




/* 共通見出し ------------------------------*/


.con_title {
font-family: 'Caprasimo', serif;
margin-bottom: 30px;
font-size: 225%;
color: #5D2428;
text-align: center;
background-image: url(../img/con_title_bg.png); 
background-repeat: no-repeat;
background-position: center top;
background-size: 100px 40px;
padding-top: 40px; 
}

.con_title_w {
color: #FCEABB;
background-image: url(../img/con_title_bg_w.png); 
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con_title {
margin-bottom: 15px;
font-size: 188%;
background-size: 80px 32px;
padding-top: 32px; 
}


}
/* -------------end------------- */





/* ========================================

    ■ con1

======================================== */
.con1_outside{
    padding-top: 50px;
    padding-bottom: 100px;
    background-color: #5D2428;
    color: #ffffff;
    
}

.welcome{max-width: 70%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;}

.con1_lead{
    color: #FCEABB;
    font-size: 163%;
    margin-bottom: 50px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.con1_flex_box{display: flex;
justify-content: space-between;
    align-items: center;
margin-bottom: 50px;}
.con1_flex_box li{width: 60%;}
.con1_flex_box li:first-child {
    width: 20%;


}

.con1_flex_box li:first-child div{
    background-position: center;
    background-image: url(../img/con1_img01.png);
    height: 0;
    width: 100%;
    background-size: cover;
padding-top:calc(810 / 810 * 100%);/* 画像の高さ667÷画像の幅1000×100*/
}



.con1_flex_box li:last-child{width: 20%;}

.con1_flex_box li:last-child div{
    background-position: center;
    background-image: url(../img/con1_img02.png);
    height: 0;
    width: 100%;
    background-size: cover;
padding-top:calc(810 / 810 * 100%);/* 画像の高さ667÷画像の幅1000×100*/
}

.con1_flex_box li:nth-child(2){padding-left: 40px;
padding-right: 40px;
    font-size: 113%;
    font-weight: 500;
    line-height: 1.7;
    
}

    
/* 大dくらい面用の設定-------------- */
@media screen and (max-width: 1200px) {
.con1_flex_box li:nth-child(2){padding-left: 40px;
padding-right: 40px;
    font-size: 100%;
    font-weight: 500;
    line-height: 1.6;
    
}
}    
    
/* 中くらい面用の設定-------------- */
@media screen and (max-width: 1000px) {
.con1_flex_box{
flex-wrap: wrap;
margin-bottom: 30px;
width: 90%;
margin-left: auto;
margin-right: auto;}
    
.con1_flex_box li{width: 100%;}
.con1_flex_box li:first-child{width: 50%;
    order: 2;}
.con1_flex_box li:last-child{width: 50%;
  order: 3;}

.con1_flex_box li:nth-child(2){padding-left: 0px;
padding-right: 0px;
font-size: 100%;
order: 1;
margin-bottom: 20px;
}

}
/* -------------end------------- */

.con1_info_box{background-color: #ffffff;
color: #000000;
padding: 30px;
box-sizing: border-box;
border: 3px solid #FCEABB;
border-radius: 6px;
position: relative;}

.con1_tape_upper{position: absolute;
width: 13%;
top:-13%;
left: -3%;}

.con1_tape_btm{position: absolute;
width: 13%;
bottom:-13%;
right: -3%;}

.con1_dl dt {
	
	padding-left: 15px;
	clear: left;
	float: left;
	width: 11em;
}

.con1_dl dd {
	padding-left: 11em;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #5D2428;
    font-size: 113%;
    font-weight: 500;
}

.con1_dl dd:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom-style: none;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con1_outside{
padding-top: 30px;
padding-bottom: 50px;}

.welcome{max-width: 80%;
margin-bottom: 20px;}

.con1_lead{
font-size: 125%;
margin-bottom: 20px;
text-align: left;
}



.con1_info_box{
padding: 15px;
}

.con1_tape_upper{position: absolute;
width: 13%;
top:-5%;
left: -5%;}

.con1_tape_btm{position: absolute;
width: 13%;
bottom:-5%;
right: -5%;}
    
.con1_dl dt {
 padding-left: 5px;
	clear: none;
	float: none;
	width: 100%;
}

.con1_dl dd {
	padding-left: 0;
}
}
/* -------------end------------- */


/* ========================================

    ■ con2

======================================== */
.con2_outside{
    padding-top: 50px;
    padding-bottom: 100px;
background-color: #FCEABB;
}

.con2_flex_box{display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 50px; }

.con2_flex_box li{width: 48%;
position: relative;}

.con2_flex_box li:nth-child(-n+2){
  margin-bottom: 70px;  
    
}

.menu_img{
    border: 10px solid #ffffff;
    margin-bottom: 20px;
    	-moz-box-shadow: 2px 2px 5px #666;
	-webkit-box-shadow: 2px 2px 5px #666;
	box-shadow: 2px 2px 5px #666;
    
}

.con2_tape{position: absolute;
width: 30%;
top: 5px;
transform: translateY(-50%);
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
z-index: 999;}

.menu_mark_wrap{position: relative;}


.con2_mark{position: absolute;
width: 20%;
right:5%;
top: 5%;
z-index: 999;}

.menu_icon span{
    background-color: #5D2428;
    color: #FCEABB;
    font-size: 113%;
    margin-bottom: 10px;
    padding-top: 3px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 3px;
}


.tb_menu  {
	border-spacing: 0;
	border-collapse:collapse;
	width: 100%;
    color: #5D2428;
	
}

.tb_menu td {
font-size: 150%;
font-weight: 700;
vertical-align: middle;
}

.tb_menu td.price {
text-align: right;
font-size: 175%;
}

.tb_menu td.flavor {
font-size: 100%;
font-weight: 500;
}



.tb_menu2  {
font-size: 80%;
	
}

.tb_menu2 td {
padding-bottom: 5px;
	padding-top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #5D2428;
	
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con2_outside{
    padding-top: 30px;
    padding-bottom: 50px;
}

.con2_flex_box{
margin-bottom: 30px; }

.con2_flex_box li{width: 100%;}

.con2_flex_box li:nth-child(-n+3){
  margin-bottom: 50px;  }

.menu_img{
    margin-bottom: 20px;}

.menu_icon span{
font-size: 100%;
}

.tb_menu td {
font-size: 138%;}

.tb_menu td.price {
font-size: 163%;
}
    
.tb_menu2  {
font-size: 69%;}
}
/* -------------end------------- */





/* ========================================

    ■ con3

======================================== */
.con3_outside{
    padding-top: 50px;
    padding-bottom: 100px;
    background-image: url(../img/con3_bg.png);
    background-repeat: repeat;
    background-color: #ffffff;
    border-top: 3px solid #5D2428;
}

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

.googleCalendar iframe {
  width: 100%;
  height: 500px;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con3_outside{
padding-top: 30px;
padding-bottom: 50px;}
    
.con3_lead{
margin-bottom: 15px;}
    
 .googleCalendar iframe {
	height: 600px;
  }

}
/* -------------end------------- */



/* ========================================

    ■ con4

======================================== */
.con4_outside{
padding-top: 50px;
padding-bottom: 100px;
background-color: #FCEABB;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con4_outside{
padding-top: 30px;
padding-bottom: 50px;
}

}
/* -------------end------------- */
/* ========================================

    ■ con5

======================================== */
.con5_outside{
padding-top: 50px;
padding-bottom: 100px;
background-color: #F9C43E;
}

.con5_flex_box{display: flex;
justify-content: space-between;
margin-bottom: 30px;}

.con5_flex_box li{width: 48%;}

.con5_lead{
font-size: 163%;
margin-bottom: 20px;
font-weight: 700;
line-height: 1.4;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.con5_outside{
padding-top: 30px;
padding-bottom: 50px;
}

.con5_flex_box{flex-wrap: wrap;
margin-bottom: 15px;}

.con5_flex_box li{width: 100%;}
.con5_flex_box li:first-child{margin-bottom: 15px;}
.con5_lead{
font-size: 138%;
margin-bottom: 10px;
}

}
/* -------------end------------- */




/* ========================================

   .bt_btn

======================================== */

.bt_btn {
	background-color: #D93924;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-weight: 500;
	border-radius: 6px;
    font-family: 'Caprasimo', serif;
font-size: 188%;
    position: relative;
}
.bt_btn a {
	color: #FCEABB;
	display: block;
}
.bt_btn:hover {
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}

.bt_btn a:after {
 font-family: "Font Awesome 5 Free";
  content: "\f105";
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -33px;
	font-size: 150%;
    font-weight: 900;
}




/* 小さい画面用の設定-------------- */
@media (max-width:767px) {
.bt_btn {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 113%;
}
    
.bt_btn a:after {
 margin-top: -18px;
}

}
/* -------------end------------- */



/* ========================================

    ■ footer

======================================== */
.footer {
padding-bottom: 50px;
padding-top: 50px;
background-color: #5D2428;
color: #ffffff;
}

.footer_logo{width: 20%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;}



.footer_lead {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
 
.footer_lead:before,
.footer_lead:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}
 
.footer_lead:before {
    margin-right: 1rem;
}
 
.footer_lead:after {
    margin-left: 1rem;
}

.footer_flex_box{width: 80%;
margin-left: auto;
margin-right: auto;
    display: flex;
justify-content: space-between;
margin-bottom: 70px;
flex-wrap: wrap;}

.footer_flex_box li{width: 48%;}

.footer_flex_box li:nth-of-type(-n+2){margin-bottom: 30px;}

.footer_flex_box li div:first-child img{width: 80%;}

/*.footer_flex_box li:nth-of-type(-n+2){margin-bottom: 30px;}

.footer_flex_box li div:first-child{width: 45%;}
.footer_flex_box li div:last-child{width: 55%;}*/

.footer_dl{font-size: 88%;}

.footer_dl dt {
	clear: left;
	float: left;
	width: 5em;
}

.footer_dl dd {
	padding-left: 5em;

}

.footer_honten_logo{margin-bottom: 5px;}

.add {
font-size: 70%;
text-align: center;
}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.footer {
 padding-bottom: 30px;
    padding-top: 30px;

}

.footer_logo{width: 30%;}

.footer_lead {
    font-size: 88%;
}
.footer_lead:before {
    margin-right: 0.5rem;
}
 
.footer_lead:after {
    margin-left: 0.5rem;
}

.footer_flex_box{width: 100%;
flex-wrap: wrap;
margin-bottom: 20px;}

.footer_flex_box li{width: 100%;
margin-bottom: 30px;}

.footer_flex_box li:last-child{margin-bottom: 0px;}
    
.footer_honten_logo{width: 70%;}
    
}
/* -------------end------------- */




/* ====================================================
　pagetop
==================================================== */

.pagetop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 15px;
	z-index: 1000;
}
.pagetop a {
    display: block;
    font-size: 300%;
    /*color: rgba(93,36,40,0.50);*/
    color: rgba(217,57,36,1.00);
}
.pagetop a:hover {
display: block;}

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.pagetop {

     bottom: 3px;
    right: 10px;
    
}
    
.pagetop a {font-size: 200%;}

}
/* -------------end------------- */


/* PC向けレイアウトの指定：481px以上では固定レイアウト */
.miniimage {
    display: none;
}  /* miniを非表示 */
.bigimage {
    display: block;
    line-height: 0px;
} /* bigを表示 */

@media screen and (max-width: 480px) {
.miniimage {
    display: block;
    line-height: 0px;
} /* miniを表示 */
.bigimage {
    display: none;
}   /* bigを非表示 */
}

/*  PCのみに表示するメニュー*/
.only_smt { display: none; }  /* miniを非表示 */
.only_pc  { display: block; 
} /* bigを表示 */
	
/*  スマホのみに表示するメニュー*/
@media only screen and (max-width: 768px) {
.only_smt {
	display: block;
	
} /* miniを表示 */
.only_pc  { display: none; }   /* bigを非表示 */
}




 /*================================================
 *  jqueryフェードイン
 ================================================*/
 /*----- フェードイン -----*/
.inviewfadeIn {
        opacity: 0;
        transition: .8s;}
    
.fadeIn {
        opacity: 1.0;}

/*----- 上へスライド -----*/
.inviewUp {
        transform: translate(0, 40px);
        -webkit-transform: translate(0, 40px);
        transition: .8s;}
    
.Up {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);}

/*----- ズームイン -----*/
.inviewzoomIn {
        transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        transition: .8s;}
    
.zoomIn {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);} 
    
/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
        opacity: 0;
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
        transition: .8s;}
    
.fadeInUp {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);}



/* 大きい画面用の設定-------------- */
@media (min-width:768px){
#link_info,
#link_menu,
#link_schedule,
#link_insta{
padding-top: 100px;
margin-top:-100px;
} 

	}
/* -------------end------------- */

/* 小さい画面用の設定-------------- */
@media (max-width:767px){
#link_info,
#link_menu,
#link_schedule,
#link_insta{
padding-top: 50px;
margin-top:-50px;
}


}
/* -------------end------------- */

/************************************
送信完了
*************************************/

.thanks_img{width:30%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}


/* 小さい画面用の設定-------------- */
@media (max-width:767px){
.thanks_img{width: 50%;
margin-left: auto;
margin-right: auto;
padding-top: 50px;}
	}
/* -------------end------------- */

.red{color: #e60012;}