@charset "UTF-8";

@media screen and (min-width: 769px) {
footer{
    min-width: 960px !important;
}
}

@media screen and (max-width: 768px) {
    
    body{
        min-width: 960px !important;
    }
    
    body#sapporo-special-contents.sp.migration-rwd-w1080.is-opened-fixed{
        min-width: 960px !important;
    }
    
    .sp-area-footer{
        overflow: hidden !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav > ul:first-child > li{
        border-bottom: 2px solid #dbdce2;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav > ul:first-child > li{
        font-size: 3em !important;
        margin-top: 0px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav > ul{
        margin: 85px 0 0 !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link{
        padding: 150px 30px 200px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li{
        font-size: 30px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li{
        margin-left: 30px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li:last-child{
        margin-left: 55px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li a[target]:after{
        width: 30px !important;
        height: 30px !important;
        margin-left: 12px !important;
        background-size: auto 28px !important;
        background-position: center 2px;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav > ul > li{
        margin-top: 50px !important;
        font-size: 30px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav > ul:first-child > li a{
        padding: 45px 0 !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li{
        font-size: 30px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_group-link li:first-child{
        margin-left: 10px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_logo{
        padding: 160px 0 180px !important;
        border-bottom: 2px solid #dcdde0 !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_logo img{
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_sns > ul{
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_sns > p{
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        margin-top: 100px;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_lower{
        padding: 90px 0 !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_nav{
        width: 93% !important;
        margin: 0 auto;
        margin-top: 150px !important;
    }
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_return-top a{
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        right: 50px !important;
        bottom: 60px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_note > p:last-child img{
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        position: relative;
        left: 210px;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_sns{
        margin-top: 120px !important;
        margin-bottom: -100px;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_sns > p{
        margin-top: 100px !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_sns > ul > li{
        padding: 0 10px !important;
    }
    
    .sp-area-footer{
        display: block !important;
        width: 100% !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_copyright > img{
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
        margin: 0 0 60px auto !important;
        position: relative;
        right: 180px;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_copyright{
        font-size: 2.5em !important;
    }
    
    body :not(.footer-only-pc):not(.footer-only-sp) .layout-footer .layout-footer_copyright{
        margin-top: 100px !important;
    }
    
    
    #sapporo-navigation-area.migrate-rwd{
        min-width: 960px !important;
    }
    
    .layout-header .layout-header_nav-sp{
        height: 130px !important;
    }
    
    .layout-header .layout-header_logo{
        top: 9px !important;
        width: 80px !important;
        height: auto !important;
    }
    
    .layout-header img{
        width: 100% !important;
        height: auto !important;
    }
    
    .layout-header .search-area .search-area_content{
        padding: 150px 45px 50px !important;
    }
    
    .layout-header .search-area .search-area_content input{
        padding: 25px 40px 25px 40px !important;
        font-size: 42px !important;
    }
    
    .layout-header .search-area .search-area_content button{
        -webkit-transform: scale(2.5);
        transform: scale(2.5); 
        right: 40px !important;
    }
    
    .layout-header .drawer-handle > a{
        -webkit-transform: scale(2.5);
        transform: scale(2.5); 
    }
    
    .layout-header .search-area .search-area_handle{
        top: 55px !important;
        left: 63px !important;
    }
    
    .layout-header .search-area .search-area_handle > a{
        -webkit-transform: scale(2.5);
        transform: scale(2.5); 
    }
    
    .layout-header .drawer-handle{
        top: 60px !important;
        right: 60px !important;
    }
    
    .layout-header .drawer-handle.is-active{
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
        top: 20px !important;
        right: 20px !important;
    }
    
    #sapporo-navigation-area{
        display: block !important;
    }
}

@media screen and (max-width: 667px){
    #main{
		margin-top:0 !important;
	}
}

#nav{
	clear:both;
	width:100%;
	min-width:950px;
	height:75px;
	position:absolute;
	margin-top:-75px;
	background:url(../../img/shared/navi/bg.jpg) center no-repeat;
	background-color:#050505;
	z-index:2;
}
#nav ul{
	width:950px;
	margin:0 auto;
	padding:0;
	position:relative;
}
#nav ul li{
	float:left;
	list-style:none;
	margin-right:2px;
}

/*#nav ul li#nav_01{
	width:142px;
	background:url(../../img/shared/navi/nav_01_on.jpg) center no-repeat;
}
#nav ul li#nav_02{
	width:142px;
	background:url(../../img/shared/navi/nav_02_on.jpg) center no-repeat;
}
#nav ul li#nav_03{
	width:142px;
	margin-right:0px;
	/*background:url(../../img/shared/navi/nav_03_on.jpg) center no-repeat;*/
/*}
#nav ul li#nav_04{
	width:214px;
	background:url(../../img/shared/navi/nav_04_on.jpg) center no-repeat;
}
#nav ul li#nav_05{
	width:214px;
	margin-right:0px;
	background:url(../../img/shared/navi/nav_05_on.jpg) center no-repeat;
}*/

#nav ul li#menu_btn{
	position:relative;
	cursor:pointer;
}

#nav ul li#menu_btn .open_btn{
	position:absolute;
	left:0;top:0;
	cursor:pointer;
}

#nav ul li#menu_btn .close_btn{
	position:absolute;
	left:0;top:0;
	opacity:0;
	cursor:pointer;
}

#nav ul li#menu_on{
	width:159px;
	height:75px;
	left: -22px;
	position: absolute;
	opacity:0;
	
}

#nav ul li#menu_on .open_btn_over{
	position:absolute;
	left:0;top:0;
	cursor:pointer;
}

#nav ul li#menu_on .close_btn_over{
	position:absolute;
	left: 2px;top:0;
	cursor:pointer;
	opacity:0;
}

#nav ul li#star{
	width:62px;
	margin:0 auto;
	display:block;
	padding:0 13px;
	float:initial;
	background:url(../../img/shared/navi/menu_logo_on.png) center no-repeat;
	position:absolute;
	left:50%;
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
}

.fixed{
  position:fixed !important;
  z-index:5 !important;
  margin-top:-206px !important;
}

.fixed_spmenu{
	position:fixed !important;
 	z-index:5 !important;
   margin-top:-770px !important;
}

.nav_back{
	width:100%;
	min-width:950px;
	height:75px;
	margin:0 auto;
	background:url(../../img/shared/wood.png) top center repeat;
}

#nav ul li.soon{
	width:139px;
	height:35px;
	position:absolute;
	top:80px;
	left:290px;
	/*visibility:hidden;*/
	opacity:0;
	filter:alpha(opacity=0);
}

.down_menu{
	width: 950px;
	margin: 0 auto;
	padding: 0;
}


.down_menu ul.sub_menu{
	width:580px;
	background:url(../../img/shared/navi/black85.png) repeat;
	margin:0;
	/*padding:43px 30px 90px;*/
	padding:43px 30px;
	float:left;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
	-webkit-transition: opacity 0.5s ease-out, -webkit-transform 0.5s ease-out;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out, -ms-transform 0.5s ease-out;
	opacity:0;
	z-index:1;
	list-style: none;
	position:absolute;
}



ul.sub_menu.open{
	-webkit-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	opacity:1;
}


/************************
*************************/

.down_menu .clipper{
	overflow:visible;
	position:absolute;
	z-index:1;
}

.down_menu .clipper.open{
	/*position:absolute;
	width:640px;
	height:200px;
	border:solid red 1px;
	z-index:1;
	overflow:scroll;*/
}

.down_menu .clipper.fixed{
	position: fixed;
	top:206px;
	
}
/************************
*************************/


.down_menu ul.sub_menu.menu_fix{
	position: fixed !important;
	margin-top: -131px !important;
}

ul.sub_menu li{
	width:570px;
	clear:both;
	font-size:16px;
	border-top:1px solid #4d4d4d;
	padding:12px 0;
	padding-left:10px;
	margin-left: 2px;
	background-image:url(../../img/shared/navi/menu_arrow.png);
	background-repeat:no-repeat;
	background-position: 572px 16px;
}

ul.sub_menu li:hover,
ul.sub_menu li a:hover{
	text-decoration:none !important;
}

ul.sub_menu a{
	color:#fff;
}

ul.sub_menu li.menu_last{
	border-bottom:1px solid #4d4d4d;
}

ul.sub_menu li.menu_last.cam{
	background:none;
	color:#fff;
}

ul.sub_menu li a[href^="http"]:after{
	content:url(../../img/shared/navi/glass_icon.png) !important;
	vertical-align: inherit !important;
    margin-left: 0.3em;
}

ul.sub_menu li.sub_menu_area{
	width:530px;
	border-top:none;
	margin:0 !important;
	border-bottom:1px solid #292827;
	float:right !important;
	background-position: 532px center;
}

ul.sub_menu li.sub_menu_area.last{
	border:none;
}

ul.sub_menu li a{
	display:block;
    text-decoration: none;
}

#sapporo-footer-area{
	margin-bottom: -1.5em;
}

ul.sub_menu li.active a{
	cursor:default;
	color: #e6bf00;
}

ul.sub_menu li:hover a{
    color: #e6bf00;
}

#sapporo-footer-area{
	min-width: 960px;
}

.down_menu .sp{
	display:none;	
}


@media screen and (max-width: 661px){
	.fixed{
		margin-top: -166px !important;
		padding-left: 5px;
	}
	.fixed_spmenu{
		padding-left: 5px;
	}
}

@media screen and (max-width: 667px){
	
	.sp-area-header,
	#sapporo-topicpath-area{
		z-index:10;
	}
	
	#sapporo-topicpath-area div.topicpath p{
		background-image:url(../../img/shared/transparent.gif);
	
	}
	
	#contents_box{
		overflow:visible !important;
	}
	
	.down_menu .sp{
		display:block;	
	}

	
	#nav ul li#star{
		background-image:none;
	}
	
	.sp-area-header .btns img{
		height:auto;
	}
	
	.sp-area-footer .notice .notice-txt{
		position:absolute;		
	}
	
	.sp-area-footer .notice .notice-txt.pc{
		position:relative;		
	}
	
	.sp-area-footer .footnav a[href^="http://www.sapporoholdings.jp/index.html"]:after {
		content: url("/beer/img/shared/navi/ico_window_02e.png");
	}
	
	.nav_back{
		width:100%;
		min-width:960px;
	}
	
	#nav{
		background:url(../../img/shared/navi/bg_sp.jpg) center no-repeat;
		height:124px;
		background-size: cover;
	}
	
	#nav ul li#menu_btn{
		margin-left: 3.6%;
		margin-top: 1%;
		width:14.84%;
	}
	
	#nav ul li#menu_on{
		opacity:0;
		visibility:hidden;
	}
	
	#nav ul li#menu_btn img{
		width:100%;
		height:auto;
		-webkit-transition:opacity 0.3s ease-out;
		transition:opacity 0.3s ease-out;
	}
	
	div.open_btn,
	div.close_btn{
		width:100%;
		-webkit-transition:opacity 0.3s ease-out;
		transition:opacity 0.3s ease-out;
	}
	
	#nav ul li#star{
		width:9.68%;
		margin-top: 0.6%;
        box-sizing: initial;
	}
	
	#nav ul li#star img{
		width:100%;
		height:auto;
	}
	
	
	.down_menu{
		width:100%;
		max-width:960px;
	}
	
	.down_menu ul.sub_menu{
		width:100%;
		max-width:900px;
		margin-top: 48px;
		z-index:-1;
	}
	
	.down_menu.pc li{
		/*min-width:950px;*/
	}
	ul.sub_menu.open{
		z-index:3;
	}
	
	ul.sub_menu.zindex{
		z-index:1;
	}
	
	ul.sub_menu li{
		width:97.6%;
		font-size: 36px;
		padding:36px 0;
		padding-left:1.2%;
		background-position: right center;
		border-top:3px solid #4d4d4d;
		background-size:2%;
	}
	
	ul.sub_menu li.sub_menu_area{
		width:82.81%;
		background-position: 98% center;
		border-bottom:3px solid #292827;
		padding-right: 10% !important;
	}
	
	div.sp-all{
		display: block;
		z-index: 100;
		
		background-color: #f0ebdf;
		position: relative;
		min-width:960px;
	}
	
	.sp-menu{
		margin:0 !important;
		background-color: #f0ebdf;
		/*padding-bottom: 10px;*/
	}
	
	#sapporo-topicpath-area{
		padding-top: 1px;
		margin-top:-1px;
		padding-bottom: 1px;
		margin-bottom:-1px;
	}
	
}
@media screen and (max-width: 530px){
	.sp-area-footer .footnav a[href^="http://www.sapporoholdings.jp/"]:after {
		content: url("/beer/img/shared/navi/ico_window_02d.png");
	}
}
@media screen and (max-width: 450px){
	.sp-area-footer .footnav a[href^="http://www.sapporoholdings.jp/"]:after {
		content: url("/beer/img/shared/navi/ico_window_02c.png");
	}
}
@media screen and (max-width: 380px){
	.sp-area-footer .footnav a[href^="http://www.sapporoholdings.jp/"]:after {
		content: url("/beer/img/shared/navi/ico_window_02b.png");
	}
}
@media screen and (max-width: 330px){
	.sp-area-footer .footnav a[href^="http://www.sapporoholdings.jp/"]:after {
		content: url("/beer/img/shared/navi/ico_window_02a.png");
	}
}

.sp-area-footer .footnav .footnav-list.pc a[href^="http://www.sapporoholdings.jp/"]:after{
	content:url("/img/shared/ico/ico_window_02.gif")
}

.sp-area-footer.pc{
	min-width:940px;
}
.sp-all.pc{
	min-width:960px;
}

#sapporo-topicpath-area{
	position:relative;
}