@charset "utf-8";

/*グーグルフォント 、h3*（商品紹介など）*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&display=swap');


body{
	
}

article{
	background: url(../images/shop/bg.png) left top no-repeat;
	width: 900px;
	height: 600px;
	position: relative;
}


/*------------------------------------------------------------------------------------------
 * 予約ボタン 
-------------------------------------------------------------------------------------------*/

#reservation {
	margin: 0 auto 2em auto;
	text-align: center;
}

#reservation h2 {
	margin-bottom: 0.5em;
	font-size: 120%;
	font-weight: bold;
	color: #3372b2;
}

#reservation p {
	margin-bottom: 0.5em;
	padding: 0 4em;
	color: #3372b2;
}



#reservation .btn {
	margin: 0 auto 0 auto;
	clear: both;
}

#reservation .btn a {
	display: block;
	margin: 0 auto 0 auto;
	padding: 1em 2em;
	color: #fff;
	font-size: 120%;
	background: #3372b2;
	border-radius: 5px;
}

#reservation .btn a span {
	font-size: 80%;
}

/*------------------------------------------------------------------------------------------
 * Cafe 
-------------------------------------------------------------------------------------------*/

#Cafe h1{
	text-align: center;
	position: absolute; top: 25px; left: 50%;
	margin-left: -109px;
	z-index: 101;
}

#Cafe #Contents{
	width: 810px;
	height: 510px;
	padding-top: 65px;
	margin-left: 80px;
}

#Cafe #Contents .wrap{
	/*height: 1750px;*/
	padding-top: 33px;
	overflow: hidden;
}

/* Special */
#Cafe #Special {
	margin-bottom: 50px;
}

#Cafe #Special {
	margin-bottom: 50px;
}

#Cafe #Special .list{
	width: 660px;
	padding-left: 20px;
	overflow: hidden;
}

#Cafe #Special .list .item{
	margin-top: 30px;
	padding-bottom: 32px;
	background: url(../images/shop/dot01.gif) left bottom repeat-x;
	position: relative;
	overflow: hidden;
}

#Cafe #Special .list .item .left{
	width: 332px;
	margin-left: 2px;
	float: left;
}

#Cafe #Special .list .item h3{
	padding-top: 3px;
}

#Cafe #Special .list .item .al{
	margin-top: 20px;
}

#Cafe #Special .list .item .img{
	float: right;
	margin-right: 15px;
}

#Cafe #Special .list {
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}

#Cafe #Special .list .item h3 {
	margin-bottom: 0.6em;
	font-size: 120%;
	font-weight: bold;
	color: #3372b2;
}

#Cafe #Special .list .item h3 strong {
	margin-bottom: 0.3em;
	display: block;
	color: #6cc4cc;
	font-size: 65%;
}

#Cafe #Special .list .item ul {
	margin-bottom: 3em;
}

#Cafe #Special .list .item ul li {
	margin-bottom: 0.2em;
	text-align: right;
	font-size: 130%;
	font-weight: bold;
	color: #3372b2;
}

#Cafe #Special .list .item ul li span {
	font-size: 60%;
}

#Cafe #Special .list .item .txt {
	margin-bottom: 0.5em;
	line-height: 1.4;
	font-size: 90%;
}

#Cafe #Special p.allergies {
	padding:1% 0 1% 70px;
	background: url(../images/lesson/text_allergies.gif) no-repeat left center;
	font-size: 70%;
}

#Cafe #Special .allergies_note {
	font-size: 120%;
	color: #C20003;
}



/* Basic */
#Cafe #Basic{
	width: 700px;
	overflow: hidden;
	margin-bottom: 30px;
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}



/* basic */
#Cafe #Basic section {
	margin-top: 10px;
	width: 340px;
}

#Cafe #Basic section h2{
	margin-bottom: 10px;
}

#Cafe #Basic section ul{
	
}

#Cafe #Basic section ul li{
	width: 300px;
	margin: 0 auto;
	padding: 0.5em 0;
	background: url(../images/shop/dot03.gif) left bottom repeat-x;
}

#Cafe #Basic section ul li.last{
	background: none;
}

#Cafe #Basic section ul li h3{
	margin-top: 20px;
	padding-left: 2px;
}

#Cafe #Basic section ul li .txt{
	margin-top: 20px;
	padding-left: 2px;
}

#Cafe #Basic section ul.price li span {
	font-size: 60%;
}


#Cafe #Basic section ul li .al{
	margin-top: 20px;
	padding-left: 2px;
}

/* ice */
#Cafe #Ice{
	float: left;
}

/* hot */
#Cafe #Hot{
	float: right;
}

#Cafe #Hot ul li{
	background: url(../images/shop/dot04.gif) left bottom repeat-x !important;
}

#Cafe #Hot .caption{
	width: 300px;
	margin: 27px auto 0 auto;
}


/*------------------------------------------------------------------------------------------
 * Product 
-------------------------------------------------------------------------------------------*/

#Products h1{
	text-align: center;
	position: absolute; top: 25px; left: 50%;
	margin-left: -84px;
	z-index: 101;
}

#Products #Contents{
	width: 810px;
	height: 510px;
	padding-top: 73px;
	margin-left: 80px;
}

#Products #Contents .wrap{
	/*height: 1900px;*/
	padding-top: 33px;
	padding-bottom: 5em;
	overflow: hidden;
}


/* #Kashi */
#Products #Kashi{
	width: 700px;
}

#Products #Kashi .kashi{
	padding: 30px 0 42px 0;
	margin: 0 0 10px 0;
	background: url(../images/shop/dot01.gif) left bottom repeat-x;
}

.kashi .line_under{
	padding: 30px 0 80px 0;
	margin: 0 0 10px 0;
	background: url(../images/shop/dot01.gif) left bottom repeat-x;
}

#Products #Kashi .kashi .outer{
	padding: 0 0 0 375px;
	width: 318px;
	
}

#Products #Kashi .kashi h3{
	margin: 4px 0 0 0;
	padding: 0 0 6px 2px ;
}


/*青色のタイトル*/
h3.tit_middle_01{
    color:#3372B2;
    font-size:140%;
    font-weight: bold;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    
}


#Products #Kashi .kashi p{
	margin-top: 20px;
	padding:0 0 20px 2px;
	background: url(../images/shop/dot02.gif) left bottom repeat-x;
}


#Products #Kashi .kashi .al{
	padding: 0;
	background: none;
}

#Products #Kashi .price01{
	padding:10px 0 0 0;

	
}

#Products #Kashi #Kashi01 .outer{
	
	background: url(../images/shop/kashi01_img.jpg) 5px top no-repeat;
}

#Products #Kashi #Kashi02 .outer{
	
	background: url(../images/shop/kashi02_img.jpg) 5px top no-repeat;
}
#Products #Kashi #Kashi03 .outer{
	
	background: url(../images/shop/kashi03_img.jpg) 5px top no-repeat;
}

#Products #Kashi #Kashi03 .price02{
	padding-bottom: 6px;
}

/* #Goods */
#Products #Goods{
	width: 700px;
	margin-top: 60px;
	
}

#Products #Goods h2{
	
}


#Products #Goods .goods{
	padding: 30px 0 42px 0;
	margin: 0 0 10px 0;
    background: url(../images/shop/dot01.gif) left bottom repeat-x;
}

#Products #Goods .goods .outer{
	padding: 0 0 0 375px;
	width: 318px;
}

#Products #Goods .goods p{
	margin-top: 20px;
	padding:0 0 25px 2px;
	background: url(../images/shop/dot02.gif) left bottom repeat-x;
	
}

#Products #Goods .price01{
	padding:20px 0 20px 0;

	
}

#Products #Goods #Goods01 .outer{
	padding-bottom: 4em;
	background: url(../images/shop/goods01_img.jpg) left top no-repeat;
}

/*------------------------------------------------------------------------------------------
 * Lesson 
-------------------------------------------------------------------------------------------*/
#Lesson {
	margin-top: 36px;
}

#Lesson h1{
	text-align: center;
	position: absolute; top: -36px; left: 50%;
	margin-left: -135px;
	z-index: 101;
}

#Lesson #Contents{
	width: 804px;
	height: 510px;
	padding-top: 73px;
	margin-left: 87px;
}

#Lesson #Contents .wrap{
	margin-top: 55px;
	width: 700px;
	overflow: hidden;
}

/* #Content1 */
#Lesson #Content1{
	overflow: hidden;
}

#Lesson #Content1 .left{
	float: left;
	width: 350px;
}

#Lesson #Content1 .left .txt01{
	margin-top: 26px;
}

#Lesson #Content1 .left .txt02{
	margin-top: 27px;
}

#Lesson #Content1 .left .img{
	margin-top: 34px;
}

#Lesson #Content1 .left .al{
	margin-top: 24px;
}

/* right */
#Lesson #Content1 .right{
	float: right;
	width: 330px;
}

#Lesson #Content1 .right .txt03{
	margin-top: 42px;
}

#Lesson #Content1 .right .txt04{
	margin-top: 17px;
}

#Lesson #Content1 .right .txt05{
	margin-top: 16px;
}

#Lesson #Content1 .right .txt06{
	margin-top: 23px;
	margin-left: 2px;
}

#Lesson #Content1 .right .txt07{
	margin-top: 16px;
}

#Lesson #Content2{
	margin-top: 62px;
}

#Lesson #Content2 .content{
	width: 701px;
	margin-top: 33px;
	background: url(../images/shop/les02_bg_mid.gif) center top repeat-y;
	padding: 103px 0 38px 0;
	position: relative;
}

#Lesson #Content2 .content .outer{
	width: 701px;
	height: 156px;;
	
	position: absolute; left: 0; bottom: 0;
	background: url(../images/shop/les02_bg_btm.gif) center bottom no-repeat;
	z-index: 8;
}

#Lesson #Content2 .content .inner{
	width: 701px;
	height: 120px;
	
	position: absolute; left: 0; top: 0;
	background: url(../images/shop/les02_bg_top.gif) center top no-repeat;
	z-index: 9;
}

#Lesson #Content2 .content h3{
	position: absolute; left: 112px; top:33px;
	z-index: 10;
}

#Lesson #Content2 .content .item{
	width: 630px;
	height: auto;
	margin: 0 auto;
	background: #80808d;
	position: relative;
	z-index: 10;
}

/* Content3 */
#Lesson #Content3{
	width: 700px;
	height: 1197px;
	margin-top: 60px;
	position: relative;
	background: url(../images/shop/les03_line.gif) 163px 135px no-repeat;
}

#Lesson #Content3 h2{
	
}

#Lesson #Content3 .img01{position: absolute; left: 32px; top: 42px;}
#Lesson #Content3 .img02{position: absolute; left: 382px; top: 152px;}
#Lesson #Content3 .img03{position: absolute; left: 61px; top: 332px;}
#Lesson #Content3 .img04{position: absolute; left: 384px; top: 442px;}
#Lesson #Content3 .img05{position: absolute; left: 30px; top: 622px;}
#Lesson #Content3 .img06{position: absolute; left: 386px; top: 732px;}

#Lesson #Content3 .img10{position: absolute; left: 21px; top: 212px;}
#Lesson #Content3 .img11{position: absolute; left: 319px; top: 70px;}
#Lesson #Content3 .img12{position: absolute; left: 496px; top: 52px;}
#Lesson #Content3 .img13{position: absolute; left: 416px; top: 310px;}
#Lesson #Content3 .img14{position: absolute; left: 13px; top: 440px;}
#Lesson #Content3 .img15{position: absolute; left: 552px; top: 437px;}
#Lesson #Content3 .img16{position: absolute; left: 384px; top: 604px;}
#Lesson #Content3 .img17{position: absolute; left: 231px; top: 599px;}
#Lesson #Content3 .img18{position: absolute; left: 63px; top: 798px;}
#Lesson #Content3 .img19{position: absolute; left: 556px; top: 736px;}
#Lesson #Content3 .img20{position: absolute; left: 534px; top: 894px; z-index: 2;}

#Lesson #Content3 .banner{position: absolute; left: 30px; top: 987px;}





#Lesson .limited,
#Lesson #weekday {
	margin-bottom: 2em;
	line-height: 1.5;
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}

#Lesson .limited h2 {
	margin-bottom: 1em;
}

#Lesson .limited h3,
#weekday h3 {
	margin-bottom: 0.6em;
	font-size: 135%;
	font-weight: bold;
	color: #3372b2;
}

#Lesson .limited h4 {
	font-size: 90%;
	font-weight: bold;
}

#Lesson .limited p.num,
#weekday p.num {
	margin-bottom: 0.5em;
	font-size: 75%;
}

#Lesson .limited p.price,
#weekday p.price {
	margin-bottom: 0.5em;
	font-size: 120%;
	font-weight: bold;
	color: #3372b2;
}

#Lesson .limited p.price span,
#weekday p.price span {
	font-size: 60%;
}

#Lesson .limited p.allergies,
#weekday .allergies {
	margin-bottom: 0.5em;
	padding-left: 70px;
	background: url(../images/lesson/text_allergies.gif) no-repeat left 3px;
	font-size: 70%;
}

#Lesson .limited ul.note li,
#weekday ul.note li {
	font-size: 70%;
}

#Lesson .limited ul.def {
	color: #3372b2;
}

#Lesson .limited p.accept,
#weekday .accept {
	margin-bottom: 0.6em;
	padding-left: 80px;
	background: url(../images/lesson/text_accept.gif) no-repeat left center;
	font-size: 80%;
	font-weight: bold;
}

#weekday .schedule {
	margin-bottom: 0.6em;
	padding-left: 80px;
	background: url(../images/lesson/text_schedule.gif) no-repeat left top;
	font-size: 80%;
	font-weight: bold;
}

#Lesson .limited p.time,
#weekday p.time {
	margin-bottom: 1em;
	padding-left: 80px;
	background: url(../images/lesson/text_time.gif) no-repeat left center;
	font-size: 88%;
	font-weight: bold;
}

#Lesson .note,
#weekday .note {
	margin-top: 1em;
}

#Lesson .note li,
#weekday .note li {
	font-size: 84%;
}




/* corver */
.corver_left{
	width: 54px;
	height: 600px;
	position: absolute; left: 0; top: 0;
	background: url(../images/shop/corver_left.png) left top no-repeat;
	z-index: 100;
}

.corver_right{
	width: 55px;
	height: 600px;
	position: absolute; right: 0; top: 0;
	background: url(../images/shop/corver_right.png) left top no-repeat;
	z-index: 100;
}

.corver_up{
	width: 791px;
	height: 121px;
	position: absolute; top: 0; left: 54px;
	background: url(../images/shop/corver_up.png) left top no-repeat;
	z-index: 100;
}

.corver_down{
	width: 791px;
	height: 71px;
	position: absolute; bottom: 0; left: 54px;
	background: url(../images/shop/corver_down.png) left top no-repeat;
	z-index: 100;
}

#BtnKashi{
	position: absolute;
	right: 215px; top: 56px;
	z-index: 100;
}

#BtnGoods{
	position: absolute;
	right: 130px; top: 56px;
	z-index: 100;
}
#Close{
	position: absolute;
	right: 20px; top: 20px;
	z-index: 100;
}




/*------------------------------------------------------------------------------------------
 * CustomDragBar 
-------------------------------------------------------------------------------------------*/

.mCSB_scrollTools .mCSB_dragger{
	width: 47px !important;
	height: 47px !important;
	left: 0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width: 47px !important;
	height: 47px !important;
	background: url(../images/shop/scr_drag.png) left top no-repeat !important;
	/*margin: -16px 0 0 -16px;*/
}

.mCustomScrollBox>.mCSB_scrollTools{
	width: 47px;
	height: 380px;
	top: 68px; right: 36px;
}

.mCSB_scrollTools .mCSB_draggerRail{
	width: 16px;
	height: 368px;
	background: url(../images/shop/scr_bar.gif) left top no-repeat;
	margin-left: 16px;
}