@charset "utf-8";

html { width:100%; *zoom: 1;}
*{ margin:0;padding:0; }
body {
	background:#ffffff;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing: antialiased;
	font-family:Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo ;
}
img {
  vertical-align:bottom;
}
#wrapper a,
#wrapper a:hover {
  color: #313131;
}
#wrapper a:hover {
  text-decoration: none;
}

@media screen and (min-width: 769px){
  
#wrapper {
  width:100%;
  min-width:950px;
  font-size:16px;
  line-height:1.6;
  color:#313131;
}

.sp { display:none;}
.drawer { display:none;}

/*------------------------
header
-------------------------*/
.slideArea {
  width:100%;
  height:390px;
  background-position:center top;
  background-size:auto 100%;
  overflow: hidden;
  position: relative;
  z-index:0;
  margin:0 auto;
}

.slideArea img {
    top: 0;
    left: 0;
    position: absolute;
    width:100%;
    height:auto;
    min-width:1250px;
}

.mjuktop header {
  position:absolute;
  left:50%;
  margin-left:-475px;
  width:950px;
  height:390px;
  z-index:100;
}

.mjuktop header h1 {
  position:absolute;
  top:86px;
  left:50%;
  margin-left:-224px;
}

.mjuktop header .header-catalog {
  position:absolute;
  top:0;
  right:0;
}

.mjuktop .headMenu { display:none; }

/*------------------------
news
-------------------------*/
.newsArea {
  width:100%;
  margin:0 auto 40px;
  background:#eeeeee;
  border-top:1px solid #ffffff;
}

.newsArea dl {
  width:870px;
  margin:0 auto;
  padding-left:80px;
  font-size:15px;
  overflow:hidden;
  background:url(../images/news_ttl.png) left center no-repeat;
}

.newsArea dd,
.newsArea dt {
  float:left;
  height:40px;
  line-height:40px;
}

.newsArea dt {
  color:#1d2088;
  font-weight:bold;
  margin-right:25px;
}

/*------------------------
contents
-------------------------*/

.topArea {
  width:950px;
  margin:0 auto 50px;
/*  newsエリアコメントアウトの際追記*/
  margin-top: 40px;
}

.topArea ul { overflow:hidden;}

.topArea li {
  min-height:370px;
  float:left;
  padding:0 10px 10px 10px;
  background:#f7f7ec;
  position:relative;
  margin-bottom:10px;
  text-align:center;
  list-style:none;
}
/*ミュークハウス*/
.topArea li#house {
	padding: 0;
	width: 310px;
	background: #fff;
	/*右端に来る時のみ以下コメントアウト*/
    /*margin-right: 10px;*/
}


.topArea li#house p.images {
	margin: 0;
}
.topArea li p.mt20 {
	margin-top: 20px;
}
.topArea li p.mt30 {
	margin-top: 30px;
}
.topArea li p.mt40 {
	margin-top: 40px;
}
.topArea li p.mt50 {
	margin-top: 50px;
}
.topArea li.others {
  height:auto;
  min-height:100px;
}
.topArea li.clear {
	clear: both;
}

.topArea .lbox {
  width:610px;
}

.topArea .sbox {
  width:290px;
}

.topArea p.images {
  margin-bottom:12px;
}

.topArea li.others p.images {
  margin-bottom:0;
}

.topArea .mr {
  margin-right:10px;
}

.topArea .new {
  background:url(../images/icon_new.png) left top no-repeat #f7f7ec;
}
.topArea .new_christmas {
  background:url(../images/icon_new_christmas_2.png) left top no-repeat #f7f7ec;
}


.topArea li h2,
.topArea li h3 {
  margin:0 auto;
}

.topArea li h2.gallery {width:146px; padding:17px 0 13px 0;}
.topArea li h2.japan {width:194px; padding:16px 0 12px 0;}
.topArea li h2.moment {width:230px; padding:15px 0;}
.topArea li h2.know {width:125px; padding:15px 0;}
.topArea li h2.feel {width:273px; padding:15px 0 16px 0;}
.topArea li h2.life {width:181px; padding:15px 0;}
.topArea li h2.recipe {width:171px; padding:15px 0;}
.topArea li h2.mymjuk {width:232px; padding:15px 0;}
.topArea li h2.catalogs {width:220px; padding:15px 0 35px;}
.topArea li h3.catalogs {width:220px; padding:20px 0;}
.topArea li h2.facebook {width:218px; padding:15px 0;}
.topArea li h2.instagram {width:218px; padding:15px 0;}
.topArea li h2.door {width:110px; padding:15px 0;}
.topArea li h2.enjoy {width:273px; padding:15px 0;}
.topArea li h2.world {width:238px; padding:15px 0;}
}
.topArea li .font-s {
	font-size: 0.8em;
}
@media screen and (max-width: 768px){
  #wrapper {
  width:100%;
  font-size:16px;
  line-height:1.6;
  color:#313131;
  position:relative;
}

.pc { display:none;}

.slideArea_sp {
  width:100%;
  height:200px;
  background-position:center top;
  background-size:auto 100%;
  overflow: hidden;
  position: relative;
  z-index:0;
  margin:44px auto 0;
}

.slideArea_sp img {
/*
    top: 0;
    left: 0;
*/
    position: absolute;
    width:100%;
    height:auto;
    min-width:320px;
/*	以下クリスマス 追加分 20251125*/
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*------------------------
header
-------------------------*/

.mjuktop header {
  position:absolute;
  width:100%;
  height:200px;
  z-index:50;
}

.mjuktop header h1 {
  position:absolute;
  top:45px;
  left:50%;
  margin-left:-112px;
}
.mjuktop header h1 img {
  width:224px;
  height:auto;
}

.mjuktop header .header-catalog {
  display:none;
}

.mjuktop .headMenu {
  width:100%;
  height:44px;
  position:fixed;
  z-index:200;
  top:0;
  left:0;
}

.mjuktop .headMenu .inner {
  position:absolute;
  width:100%;
  height:44px;
  background:#ffffff;
  top:0;
  left:0;
  box-shadow:0 0 3px #000;
  -webkit-transform: translate3d(0,0px,200px);
	-moz-transform: translate3d(0,0px,200px);
	-o-transform: translate3d(0,0px,200px);
	transform: translate3d(0,0px,200px);
}

.mjuktop .headMenu .sp-top {
  position:absolute;
  left:0;
  top:0;
}
.mjuktop .headMenu .sp-top img {
  height:44px;
  width:auto;
}

.mjuktop .headMenu p.sp-header-logo {
  position:absolute;
  right:50%;
  margin-right:-36px;
}
.mjuktop .headMenu p.sp-header-logo img {
  height:auto;
  width:72px;
}

.mjuktop .headMenu p.sp-header-catalog {
  position:absolute;
  right:0;
  z-index:30;
}
.mjuktop .headMenu p.sp-header-catalog img {
  height:44px;
  width:auto;
}
/*------------------------
news
-------------------------*/
.newsArea {
  width:100%;
  padding:15px;
  box-sizing:border-box;
  background:#eeeeee;
}

.newsArea dl {
  padding-top:30px;
  font-size:15px;
  background-image:url(../images/sp_news_ttl.png);
  background-position: left top;
  background-repeat:no-repeat;
  background-size:54px auto;
}

.newsArea dt {
  color:#1d2088;
  font-weight:bold;
 margin-bottom:5px;
}

/*------------------------
contents
-------------------------*/	
.topArea li {
  border-top:1px solid #bfbfbf;
  padding:15px;
  position:relative;
  text-align:center;
  list-style:none;
}
.topArea li#house {
	width: 100%;
	box-sizing: border-box;
}
.topArea p.images {
  margin-bottom:10px;
  text-align:center;
}

.topArea p.images img {
  width:100%;
  height:auto;
  max-width:600px;
}

.topArea li.others p.images {
  margin-bottom:0;
}

.topArea .new {
  background-image:url(../images/sp_icon_new.png);
  background-position:left top;
  background-repeat:no-repeat;
  background-size:40px auto;
}
.topArea .new_christmas {
  background-image:url(../images/sp_icon_new_christmas_2.png);
  background-position:left top;
  background-repeat:no-repeat;
  background-size:40px auto;
}
.topArea .new-house {
  background-image:url(../images/sp_icon_new.png);
  background-position:left top;
  background-repeat:no-repeat;
  background-size:40px auto;
}
.topArea li h2,
.topArea li h3 {
  margin:0 auto 15px;
}

.topArea li h2.moment {width:230px;}
.topArea li h2.know {width:125px;}
.topArea li h2.feel {width:273px;}
.topArea li h2.life {width:181px;}
.topArea li h2.recipe {width:171px;}
.topArea li h2.mymjuk {width:232px;}
.topArea li h2.catalogs {width:220px;}
.topArea li h3.catalogs {width:220px;}
.topArea li h2.facebook {width:218px;}
.topArea li h2.instagram {width:218px;}
.topArea li h2.instagram {width:110px;}
.topArea li h2.world {width:238px;}

/*-------------------------------------------------
Drawer
-------------------------------------------------*/

nav.topNav {
	position:absolute;
	width:100%;
	top:44px;
	left:0;
  box-shadow:0 0 8px #000;
}

.drawer {
  position:relative;
	-webkit-transform: translate3d(0, -600px, 100px);
	-moz-transform: translate3d(0, -600px, 100px);
	-o-transform: translate3d(0, -600px, 100px);
	transform: translate3d(0, -600px, 100px);
	-webkit-transition:-webkit-transform 0.25s linear;
	-moz-transition:-moz-transform 0.25s linear;
	-o-transition:-o-transform 0.25s linear;
	transition:transform 0.25s linear;
}

.drawer.active {
    position:relative;
	-webkit-transform: translate3d(0,0px,100px);
	-moz-transform: translate3d(0,0px,100px);
	-o-transform: translate3d(0,0px,100px);
	transform: translate3d(0,0px,100px);
}

nav.topNav ul li a {
  display:block;
  padding:0 15px;
  box-sizing:border-box;
  border-bottom: 1px solid #d3d3d3;
  background-image:url(../../common/images/footer/sp_arrow.png);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:28px 13px;
  background-color:#ffffff;
  font-size:14px;
  height:60px;
  line-height:60px;
  text-decoration:none !important;
  color:#000000 !important;
}

nav.topNav ul li.cs {
  display:block;
  padding:0 15px;
  box-sizing:border-box;
  border-bottom: 1px solid #d3d3d3;
  background-image:url(../../common/images/footer/cs.png);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 10px;
  background-color:#ffffff;
  font-size:14px;
  height:60px;
  line-height:60px;
  text-decoration:none !important;
  color:#000000 !important;
}

}