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

/*------------------------------------------------------------
レスポンシブ用
1080px以下タブレットなど
576px以下スマホなど
------------------------------------------------------------*/

/*-----レスポンシブ------*/

/* ウィンドウ幅が1280px-の場合に適用 */
@media screen and ( min-width:1280px )
{

#header #logo-txt{
	left: 155px;
}

}

/* ウィンドウ幅が-1280pxの場合に適用 */
@media screen and ( max-width:1280px )
{

body{
	font-size: 1.2vw;
}

#footer-nav ul{
	width: 12em;
}

#footer-nav{
	margin-left: 20%;
}

#footer-box-shop{
	margin-left: 2em;
}

}

/* ウィンドウ幅が-1080pxの場合に適用 */
@media screen and ( max-width:1080px )
{

html{
	overflow-x: hidden!important;
}

/* sp画像表示 */
.pc { display: none !important; }
.sp { display: inline !important; }

body{
	overflow-x: hidden;
}

#wrapper{
    margin: 0 auto;
    width: 100%;
    height: auto;
	overflow-x: hidden;
}

#main{
	width: 100%;
    height: auto;
}

/* header -1080px */
#header{
	background: white;
}

#header #logo{
	width: 120px;
	max-width: 500px;
	margin: 0.8rem 0 0.75rem 1rem;
}

#header #logo-txt{
	top: 1.4rem;
	left: 145px;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: bold;
}

.btn-gNav span{
	position: absolute;
	width: 100%;
	height: 4px;
	background: #666;
	border-radius: 10px;
	-webkit-transition: all 400ms;
	transition: all 400ms;
	z-index: 9999;
}
.btn-gNav span:nth-child(1) {
	top:0;
}
.btn-gNav span:nth-child(2) {
	top:10px;
}
.btn-gNav span:nth-child(3) {
	top:20px;
}
.btn-gNav.open span:nth-child(1){
  background: #fff;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.btn-gNav.open span:nth-child(2),
.btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
.btn-gNav{
	position: fixed;
	top: 25px;
	right: 20px;
	width: 30px;
	height: 24px;
	z-index: 3;
}

#top-nav-sp{
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#top-nav-sp.open{
	right: 0px;
    transition: 0.5s ease-out;
}

#top-nav-sp{
    background: #333333;
    width: 55vw;
    padding: 5em 0 1em 2.5em;
}

#top-nav-sp a{
    display: block;
    font-size: 4.5em;
    line-height: 3em;
    color: white;
    text-decoration: none;
}

#top-nav-sp li{
    border-bottom: 1px solid #888;
}

/* footer -1080px */

#footer-nav{
	flex-wrap: wrap;
	margin-top: -5em;
	font-size: 1.5em;
}

#footer-nav ul{
	width: 50%;
}
#footer-nav ul ul{
	width: 100%;
}

#footer-box-shop{
	margin-top: 1.5em;
	margin-left: 0;
}

#footer-nav a{
	line-height: 2em;
}

#footer-nav ul ul a{
	line-height: 1.5em;
}

/*goto_top btn -1080px*/

#topBtn {
    bottom: 60px;
	right: 15px;
}

#topBtn{
    width: 15%;
}

}

/* ウィンドウ幅が-800pxの場合に適用 */
@media screen and ( max-width:800px )
{

#footer-logo{
	width: 100%;
	text-align: center;
	margin-top: 8em;
}

#footer-logo .txt{
	font-size: 3em;
	margin-left: auto;
	padding-right: 0.8em;
	line-height: 2em;
}

#footer-logo img{
	width: 55%;
}

#footer-nav{
	margin-top: 1em;
	margin-left: 0;
	font-size: 3em;
}

#footer-nav ul{
	width: 100%;
}

#footer-nav ul ul {
  padding-left: 2em;
}

#footer-nav .menu_li{
	/*margin-left: 4em;*/
	margin-left: 2em;
}

#footer-nav .menu_li a{
	font-size: 1.5em;
}

#footer-box-shop{
  padding-left: 2em;
}

#footer .copyright{
	font-size: 1.5em;
	margin-top: 2.5em;
	height: 3em;
}

#footer .sns-icon{
	width: 15%;
	right: -5em;
	bottom: 1em;
}

#footer .sns-icon li:nth-child(2){
	margin-top: -0.7em;
}

}

/* ウィンドウ幅が-650pxの場合に適用 */
@media screen and ( max-width:650px )
{

#footer .sns-icon{
	width: 28%;
	right: -8em;
	bottom: 3em;
}

#footer .sns-icon li {
  margin-right: 2em;
}

#footer .copyright{
	font-size: 2.5em;
}

#footer-box-shop{
	width: 100%;
	font-size: 0.85em;
	line-height: 1.8em;
	white-space: normal;
}
#footer-box-shop .shop-data {
    width: 100%;
}

#footer-box-shop .privacy{
	white-space: normal;
}

}

/* ウィンドウ幅が-576pxの場合に適用 */
@media screen and ( max-width:576px )
{

h2{
	font-size: 4.2em;
}

/* shopLink -576px*/

.shop-linkbtn ul{
	display:block;
	width: 80%;
	margin: 6% auto;/*各ページcssで調整*/
}

.shop-linkbtn li{
	width: 100%;
	margin-top: 5%;
}

}