@charset "utf-8";

html { font-size: 62.5%;}



body {
	background-color: #FFF;
	text-align: center;
	margin: 0;
	padding: 0;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝", Yu Mincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Times New Roman", serif;
    -webkit-text-size-adjust: 100%;
    color: #552e31;
    font-size: 10px; font-size: 1.0rem;

}

_::-webkit-full-page-media, _:future, :root html {


}

* {
	margin: 0;
	padding: 0;
}

* img {
	border: 0;
	vertical-align: top;
}

img{
    max-width: 100%;
    height: auto;
    width /****/:auto;  /*IE8のみ適用*/
}

ul {
	list-style: none;
}

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


.img_bottom{ /* 画像IE6対策 */
	vertical-align: top;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	display: block;
}

.sp {
	display: none;
}

a {
	color: #552e31;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


/***  wrapper   ***/
#wrapper{
	width: 100%;
/*	max-width: 1196px; */
	text-align: left;
}


/***  header   ***/
header{
	width: 244px;
	background: rgba(255,255,255,0.7);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 999;
	text-align: center;
}

h1{
	margin-top: 70px;
}

header ul#nav{
	margin-top: 30px;
}

header ul#nav li{
	line-height: 1;
	margin-top: 20px;
}

header .online{
	margin-top: 30px;
}

#right-sns{
	width: 45px;
	position: fixed;
	top: 10px;
	right: 40px;
	z-index: 999;
}

#right-sns ul li{
	margin-top: 10px;
}

#right-sns ul li:last-child{
	margin-top: 30px;
}




/***  container  ***/
#container{
	margin: 50px 0 0 264px;
	width : -webkit-calc(100% - 264px) ;
	width : calc(100% - 264px);
	max-width: 976px;
}

.conts{
	margin-top: 50px;
}

.conts:first-child{
	margin-top: 0;
}

.onlineBnr{
	width: 36.78278%;
	margin: 50px auto 0;
}


/***   Footer   ***/
footer{

	position: relative;
	background: #552e31;
	padding: 30px 50px;
	z-index: 1000;
	margin-top: 100px;
}


footer h2{
	float: left;
}

footer h2 img{
	max-width: 119px;
}

.ft_pc{
	font-size: 14px;
	color: #FFF;
	margin: 30px 0 0 40px;
	float: left;
}

.ft_link a{
	color: #FFF;
}

.copyright{
	margin: 30px 0 0 0;
}



/***   パンくず   ***/
.bread{
	margin: 0 0 0 264px;
	font-size: 11px;
	color: #552e31;
	position: absolute;
	top: 20px;
	z-index: 2;
}
.bread a{
	color: #552e31;
}


@media screen and (max-width: 767px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
	
	#wrapper{
		position: relative;
	}
	/***  header   ***/
	header{
		width: 100%;
		background: rgba(255,255,255,0.7);
		position: fixed;
		top: 0;
		left: 0;
		height: 50px;
		z-index: 999;
		text-align: left;
	}

	h1{
		width: 25.26041%;
		margin-top: 0;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		line-height: 0;
		padding: 0 0 0 5.07812%;
	}

	h1 img{
		width: 100%;
		max-width: 97px;
	}

	.head-cart{
		width: 7.55208%;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		line-height: 0;
		right: 60px;
	}
	
	.head-cart img{
		width: 100%;
		max-width: 29px;
	}


	/***  MENU  ***/

/* Toggle Button */
	#nav-toggle {
		background: #d92163;
	    display: none;
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 50px;
	    height: 50px;
	    cursor: pointer;
	    z-index: 101;
	}
	#nav-toggle div {
	    position: relative;
	}
	#nav-toggle span {
	    display: block;
	    position: absolute;
	    height: 4px;
	    width: 56%;
	    background: #FFF;
	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
		  left: 0;
		  right: 0;
		  margin: auto;
		border-radius: 2px;		/* CSS3草案 */
		-webkit-border-radius: 2px;	/* Safari,Google Chrome用 */
		-moz-border-radius: 2px;	/* Firefox用 */
	}
	#nav-toggle span:nth-child(1) {
	    top: 15px;
	}
	#nav-toggle span:nth-child(2) {
	    top: 23px;
	}
	#nav-toggle span:nth-child(3) {
	    top: 31px;
	}

    /* Fixed reset */
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -506px;
        background: #FFF;
		background: rgba(255,255,255,0.8);
        width: 100%;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
        border-top: 1px solid #552e31;
        float: none;
        position: static;
    }
    
    #global-nav ul li:first-child {
        border-top: 2px solid #d92163;
    }
    
    #global-nav ul li:last-child {
        border-bottom: 1px solid #552e31;
    }
    
    
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 89.84375%;
        margin: 0 auto;
        display: block;
        color: #552e31;
        padding: 18px 0;
        font-size: calc(14px + 0.25vw);
        font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 24px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 24px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }

	li a .global-navL{
		width: 42%;
		float: left;
		display: block;
		text-align: left;
	}

	li a .global-navR{
		width: 58%;
		float: right;
		display: block;
		text-align: right;
	}

    #nav-toggle_btn {
    	width: 44.92753%;
    	margin: 25px auto;
        display: none;
	    cursor: pointer;
    }
    
    #nav-toggle_btn img {
    	max-width: 155px;
    }
    .open #nav-toggle_btn {
        display: block;
    }


	/***  container  ***/
	#container{
		margin: 50px auto 0;
		padding-left: 0;
		width : 89.84375%;
		float: none;
	}

	.onlineBnr{
		width: 100%;
		margin: 50px auto 0;
	}

	/*** FOOTER ***/
	footer{
		width: 100%;
		position: static;
		background: #552e31;
		padding: 30px 0;
		z-index: 1000;
		margin-top: 43.47826%;
	}

	footer h2{
		width: 23.47826%;
		float: none;
		margin: 0 auto;
	}

	footer h2 img{
		max-width: 100%;
	}

	.ft_sp{
		margin: 30px auto 0;
		width : 89.84375%;
	}

	.ft_sp ul{
		width: 46.37681%;
		float: left;
		font-size: 1.4rem;
		color: #FFF;
		margin-right: 7.24638%;
		line-height: 1.4;
	}

	.ft_sp ul:last-child{
		margin-right: 0;
	}

	.ft_sp ul li{
		margin-top:6.25%;
	}

	.ft_sp ul li a{
		font-size: 1.4rem;
		color: #FFF;
	}

	.copyright{
		font-size: 1.4rem;
		color: #FFF;
		text-align: center;
	}

	/* トップへ戻るボタン */
	
/*トップへ戻るボタン*/
	.topBtn {
	  position:fixed; /*固定*/
	  bottom:20px; /*場所を右下に移動*/
	  right:20px; /*場所を右下に移動*/
	  display:block; /*aタグをblock要素に変更*/
	  width:17.333%;
	  height:auto;
	  text-align:center;
	  line-height:22px;
	}

	/***   パンくず   ***/
	.bread{
		width: 89.84375%;
		margin: 50px auto;
		font-size: 1.1rem;
		color: #552e31;
		position: absolute;
		top: 65pxpx;
		left: 5.078125%;
		
		z-index: 2;
	}




}