@charset "utf-8";
* {
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:before,
:after {
	transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
}

img {
	margin: 0 auto;
	vertical-align: middle;
	border: none;
	position: relative;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
img:before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: transparent;
	/* position: absolute; */
}
img.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}
img.img-rounded {
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
img.img-thumbnail {
	display: inline-block;
	padding: 4px;
	line-height: 1.42857143;
	background-color: #FEFEFE;
	max-width: 100%;
	height: auto;
	border: 1px solid #DFDFDF;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
img.img-circle {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
/* nav of page shopinfo */

#list-nav .list-dl {
	padding: 5% 0 3% 0;
}
#list-nav .list-dl dl {
	width: 30%;
	float: left;
}
#list-nav .list-dl dl dd {
	padding: 3% 0 4% 0;
}
#list-nav .list-dl dl + dl {
	margin-left: 5%;
}
.sub-menu-parent {
	position: relative;
}
.sub-menu-parent li{
	margin: 0 !important;
}
#header .main.fixed .nav a {
	display: block;
	padding: 10px 20px;
}
.sub-menu {
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	max-width: 300px;
	transform: translateY(-2em);
	z-index: -1;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

#header .main.fixed .nav .sub-menu a {
	display: block;
	padding: 0;
}

.sub-menudf {
	visibility: hidden; /* hides sub-menu */
	opacity: 0;
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	max-width: 100%;
	transform: translateY(-2em);
	z-index: -1;
	transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
#header .sub-menu {
	left: 0;
    margin: auto;
    right: 0;
    top: 100%;
    transform: translate(-32%);
    width: 200px;
	}
/*
.sub-menu:before{
	background:url(../img/shopinfo_nabezo/nav-icon.png) no-repeat center top;
	content: "";
    height: 12px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -12px;
    width: 17px;
    z-index: 7;
	}
*/
.sub-menu-parent:hover .sub-menu,
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent01:hover .sub-menu01,
.sub-menu-parent01:focus .sub-menu01,
.sub-menu-parent02:hover .sub-menu02,
.sub-menu-parent02:focus .sub-menu02 {
	visibility: visible; /* shows sub-menu */
	opacity: 1;
	z-index: 1;
	transform: translateY(0%);
	transition-delay: 0s, 0s, 0s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
.sub-menu-parent:hover .sub-menudf li,
.sub-menu-parent:hover .sub-menu li{
	border-bottom:1px solid #d7d6d6;
	}
.sub-menu-parent:hover .sub-menudf li:last-child,
.sub-menu-parent:hover .sub-menu li:last-child{
	border:none
	}
	
.txt_box1{
	width:65%;
	margin: auto;
	padding: 2% 0 3% 0;
	text-align: left;
}
@media only screen and (min-width: 1400px) {
	#header .main.fixed .nav  .sub{
		display:block !important;
	}
}

@media only screen and (min-width: 1300px) {
	#header .main.fixed .nav{
		top: 7px !important;
	}
	#header .main.fixed .nav li{
		margin: 0 20px !important;
	}
	
}
@media only screen and (min-width: 992px) {
	#header .main.fixed .toggle{
		opacity:0;	
	}
	#header .main.fixed .nav{
		opacity:1;
		visibility:visible;
		margin: auto;
		padding: 10px 0 0;
		text-align: center;
		position: absolute;
		left: 260px;
		right: 120px; 
		top: 0;
		transition: none;
		-moz-transition: none;
		-webkit-transition: none;	
		background: none;
	}
	#header .main.fixed .nav li {
		display: inline-block;
		margin: 0 10px;
	}
	#header .main.fixed .nav  .sub{
		display: none;
	}
	#header .main.fixed .nav a{
		padding: 0;	
	}
	
	#header .main.fixed .language{
		right: 0 !important;	
	}
}
@media only screen and (max-width: 1200px) {
	.wrap {
		margin: 0 auto;
		width: 100%;
		max-width: 99%;
		transition: max-width .3s ease;
		-moz-transition: max-width .3s ease;
		-webkit-transition: max-width .3s ease;
	}
	img {
		display: inline-block;
		max-width: 100%;
	}
}
@media only screen and (max-width: 992px) {
	#header .main {
		background: rgba(0, 0, 0, .9);
		min-height: 70px;
		position: fixed;
		bottom: auto;
		z-index: 999999999;
	}
	#header .main .language {
		top: 15px;
		left: auto;
		right: 0;
	}
	#header .main .language li {
		margin: 0 5px;
	}
	#header .main .online {
		opacity: 1;
		visibility: visible;
		width: 45%;
	}
	#header .main.fixed .online {
		width: 45%;
	}
	#header .main .online a {
		margin-left: 20px;
	}
	#header .main .nav {
		opacity: 0;
		padding: 0;
		background: rgba(0, 0, 0, .8);
		top: 70px;
		left: auto;
		right: -100%;
		bottom: auto;
		visibility: hidden;
	}
	#header .main .toggle.active ~ .nav {
		opacity: 1;
		right: 0;
		visibility: visible;
	}
	#header .main .nav li {
		display: block;
		margin: 0;
	}
	#header .main .nav a {
		display: block;
		padding: 10px 20px;
	}
	#header .main .nav a:hover {
		background: rgba(0, 0, 0, .3);
	}
	#header .main .toggle {
		opacity: 1;
		visibility: visible;
		left: 54%;
		right: auto;
		top: 12px;
	}
	.sub-menu{
		display: none;
	}
	#header .main .nav .sub-menu a{
		padding: 0 !important;	
	}
	#header .main .nav .sub-menu{
	  display: block;
	  left: -270px !important;
	  top: 0px !important;
	  width: 200px !important;
	}
	#header .main .nav .sub-menu
	.sub-menu li{
	  background-color: #fff;
	}
     .sub-menudf {
        display: none;
    }

	.txt_box1{
		width: 95%;
		margin: auto;
	}
}


@media only screen and (max-width: 768px) {
	#header {
		min-height: 800px;
	}

	.line-break {
		display: inline;
	}
	/* nav of page shopinfo */
	#list-nav .list-dl dl, #list-nav .list-dl dl + dl {
	width: 95%;
	float: none;
	margin: auto;
}
#list-nav .list-dl dl dt {
	margin: auto;
}
.sub-menu {
	bottom: 0;
	right: 0;
	margin: auto;
}
}

@media only screen and (max-width: 640px) {
	body {
		font-size: 14px;
	}
	#header {
		min-height: 600px;
	}
	#header .logo {
		top: -200px;
	}
	#header .main,
	#header .main.fixed {
		min-height: 52px;
	}
	#header .language {
		top: 12px !important;
		left: 10px;
	}
	#header .main .language {
		top: 10px;
		width: 125px;
	}
	#header .language li.active {
		display: none;
	}
    #header .online {
        right: 66px;
    }
	#header .online a {
		margin-left: 0;
		padding: 7px 0;
	}
	#header .online img {
		max-width: 130px;
	}
	#header .main .nav,
	#header .main.fixed .nav {
		top: 52px;
	}
	#header .toggle {
		width: 35px;
		text-outline: 10px;
	}
	#header .online-click {
		width: 350px;
		left: 0;
		right: 0;
	}
	.sp_bnrlist1{
		display:block;	
	}
	#values .content {
	width: 100%;
	max-width: 940px;
	position: absolute;
	left: 50px;
	bottom: 50px;
	height:300px;
}
}

@media only screen and (max-width: 480px) {
	#header {
		min-height: 400px;
	}
	#header .logo {
		top: -30px;
	}

	#header .main .language li {
		margin: 0;
	}
	#header .main .online a {
		margin-left: 0;
	}
	#header .online-click {
		width: 250px;
		bottom: 10px;
	}
	#list-nav .list-dl dl dd{
		display: none;	
	}
	#list-nav .list-dl dl{
		margin-bottom: 4% !important;
	}
}

@media only screen and (max-width: 420px) {
	#header .logo {
		width: 90%;
		top: 0;
	}
	#header .toggle{
		left: 50% !important;
	}
	#header .main .language,
	#header .main.fixed .language {
		top: 10px;
        max-width: 170px; /*coming soon終わったら削除*/
	}
	#header .main .online a {
		margin-left: 0;
	}
	#header .online-click {
		padding: 0 5%;
		max-width: 90%;
	}
	#header .main .nav .sub-menu{
	    right:-15px !important;
	    top: -50px !important;
	    width: 170px !important;
	}
	#header .main .nav .sub-menu li{
		border-bottom: 1px solid #D5D5D5!important;	
	}
	#header .main .nav .sub-menu li a{
		padding: 10px 0 !important;
		background-color:rgba(255,255,255,1);
	}
}
@media only screen and (max-width: 380px) {
	#header .main .nav .sub-menu{
		right: -20px !important;
	    width: 140px !important;
	}
}
@media only screen and (max-width: 350px) {
	#header {
		min-height: 350px;
	}
	#header .main .language li {
		margin: 0 5px;
	}
	#header .main .online {
	}
}