@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: 70%;
	}

	#headerInner ul#sns {
		width: 30%;
	}

	#headerInner h1#logo img.tsukiproLogo {
		height: 50px;
	}

	#headerInner h1#logo img.officialOnlineShop {
		/* height: 24px; */
		width: 70%;
		vertical-align: middle;
		/* margin-top: 16px; */
	}

	#headerInner ul#sns {
		display: flex;
		justify-content: flex-end;
		margin-right: 55px;
	}

	#headerInner ul#sns img {
		/* height: 36px; */
		width: 33px;
		margin-left: 10px;
		vertical-align: middle;
	}

	#headerInner ul#sns li:nth-of-type(2) img {
		margin-left: 6px;
	}

	/* 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 {
		width: 70%;
		/* height: 21px; */
		/* margin-top: 16px; */
	}

	#headerInner ul#sns img {
		/* height: 36px; */
		width: 30px;
		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;
	}

	#headerInner ul#sns li:nth-of-type(2) img {
		margin-top: 4px;
	}

	#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;
	}
}