@charset "shift_jis";

/*-----------------------------------------------------------------------------
** fix
-----------------------------------------------------------------------------*/
body,
html {
	position: relative;
	/*height: 100%;高さが計算できなくなる*/
	overflow-x: hidden;
	/* スワイプ時に、左右に動くことを 禁止*/
}

/*-----------------------------------------------------------------------------
** 初期設定
-----------------------------------------------------------------------------*/
html {
	font-size: 62.5%;/* 10px */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	color: #000;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	margin: 0 auto;
	-webkit-text-size-adjust: 100%;
}
/* -----------------------------------------------------------------------------
** clearfix
----------------------------------------------------------------------------- */
.clearfix {
	zoom : 1;
}
.clearfix:after {
	display : block;
	clear : both;
	content : "";
}

/*-----------------------------------------------------------------------------
** a
-----------------------------------------------------------------------------*/
a {
	color: #1099e0;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/* スマホリンクのグレー背景を無効にする */
}

a:hover,
a:active {
	color: #1099e0;
	text-decoration: underline;
}

/*-----------------------------------------------------------------------------
** img
-----------------------------------------------------------------------------*/
img {
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
a.hoverImg img{
	transition:all 0.5s ease;
}
a:hover.hoverImg img{
	opacity: 0.7;
}
.SaleBnr {
  text-align: center;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  img.sp {
    display: none
  }
}
@media (max-width: 767px) {
  img.pc {
    display: none;
  }
}


/*-----------------------------------------------------------------------------
** wrap
-----------------------------------------------------------------------------*/
#wrap {
	text-align: left;
	width: 100%;
}
/* tablet&PC */
@media (min-width: 768px) {
	#wrap {
		min-height: calc(100vh - 44px);
	}
}

/*-----------------------------------------------------------------------------
** header
-----------------------------------------------------------------------------*/
header {
	margin: 0 auto;
	width: 100%;
}
#headerInner {
	display: flex;
}
/* SP */
@media (max-width: 767px) {
	header {
		background: #FFF;
		border-bottom: 1px solid #fff000;
		height: 50px;
		line-height: 50px;
		position: fixed;
		z-index: 99;
		top: 0;
	}
	#headerInner h1#logo {
		width: 60%;
	}
	#headerInner ul#sns {
		width: 40%;
	}
	#headerInner h1#logo img.tsukiproLogo {
		height: 50px;
	}
	#headerInner h1#logo img.officialOnlineShop {
		height: 24px;
		vertical-align: top;
		margin-top: 16px;
	}
	#headerInner ul#sns {
		display: flex;
	}
	#headerInner ul#sns img {
		height: 36px;
		margin-left: 10px;
		vertical-align: middle;
	}
	/* 12/16追加 */
	#nav-drawer {
		position: absolute;
		right: 10px;
	}
	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	}
	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	}
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;/*線の太さ*/
		width: 28px;/*長さ*/
		background: #555;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -9px;
	}
	#nav-open span:after {
		bottom: -18px;
	}
	/*閉じる用の薄黒カバー*/
	#nav-close {
		display: none;/*はじめは隠しておく*/
		position: fixed;
		z-index: 9;
		top: 0;/*全体に広がるように*/
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	/*中身*/
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;/*最前面に*/
		width: 90%;/*右側に隙間を作る*/
		max-width: 330px;/*最大幅*/
		height: 100%;
		background: #fff;/*背景色*/
		transition: .3s ease-in-out;/*滑らかに表示*/
		-webkit-transform: translateX(100%);
		transform: translateX(100%);/*左に隠しておく*/
	}
	#nav-content #closeBtn {
		background: #000;
		color: #FFF;
		font-size: 1.2rem;
		display: block;
		padding-right: 10px;
		text-align: right;
	}
	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
		display: block;/*カバーを表示*/
		opacity: .5;
	}
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);/*中身を表示*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	#nav-content ul {
	}
	#nav-content ul li {
		background: url("../img/common/icon_title.svg") no-repeat 10px center;
		background-size: 16px 16px;
		border-bottom: 1px dotted #999;
		list-style-type: none;
		width: 93%;
		padding: 0 10px;
	}
	#nav-content ul li a {
		display: block;
		color: #000;
		padding: 0 14px 0 30px;
	}
}
/* iphone5 */
@media screen and (max-width: 320px) {
	#headerInner h1#logo img.officialOnlineShop {
		height: 21px;
		margin-top: 16px;
	}
	#headerInner ul#sns img {
		height: 36px;
		margin-left: 6px;
	}
}
/* tablet&PC */
@media (min-width: 768px) {
	header {
		border-bottom: 15px solid #fff000;
	}
	#headerInner {
		margin: 0 auto;
		max-width: 980px;
		width: 100%;
	}
	#headerInner h1#logo {
		width: 70%;
	}
	#headerInner ul#sns {
		width: 30%;
	}
	#headerInner h1#logo img.tsukiproLogo {
		margin-right: 23px;
		margin-bottom: -15px;
		width: 98px;
	}
	#headerInner h1#logo img.officialOnlineShop {
		margin-top: 41px;
		vertical-align: top;
		width: 353px;
	}
	#headerInner ul#sns {
		display: flex;
		justify-content: flex-end;
		margin-top: 43px;
	}
	#headerInner ul#sns li img {
		margin-left: 14px;
		width: 50px;
	}
	#nav-drawer {
		display: none;
	}
}

/*-----------------------------------------------------------------------------
** footer
-----------------------------------------------------------------------------*/
footer {
	border-top: 1px solid #000;
	color: #646464;
	font-size: 1.2rem;
	padding: 20px 10px;
	text-align: center;
}
footer p {
	margin-bottom: 4px;
}
/* tablet&PC */
@media (min-width: 768px) {
	footer {
		font-size: 1.4rem;
	}
}
/* トップへ戻るボタン */
#page-top {
	font-family: ivyjournal,sans-serif;
	font-weight: 400;
	font-style: normal;
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#page-top a {
	background: #000;
	border-radius: 50px;
	color: #fff;
	display: block;
	font-size: 1.4rem;
	opacity: 0.8;
	text-align: center;
	text-decoration: none;
	width: 60px;
	height: 60px;
	line-height: 60px;
}
#page-top a:hover {
	text-decoration: none;
}
/* sp */
@media (max-width: 767px) {
	#page-top {
		right: 10px;
	}
	#page-top a {
		font-size: 1.2rem;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
}