@charset "utf-8";
/* ===================================================================
CSS information

 file name  :common_sp.css
 style info :スマホ用

=================================================================== */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	スマホ
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 1024px) {
	body {
		font-size: 0.9rem;

		background-color: #fff;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	#main {
		width: 100%;
		float: none;
	}
	#contents {
		width: 100%;
	}
	#contents.fixed {
		padding: 0px;
	}
	.page_wrapper,
	.single_posts {
		width: 100%;
	}
	.single_main,
	.sp_contents_wrap,
	.content-box {
		padding: 3% 5%;
		width: 100%;
	}
	.inner_band {
		width: 100%;
	}
	.thecontent .content-box {
		padding: 0;
	}
	/* -----------------------------------------------------------
    ヘッダー
----------------------------------------------------------- */
	.sp-logo {
		display: block;
	}
	.header_ttl {
		display: none;
	}
	header {
		position: relative;
	}
	#header-box {
		width: 100%;
		padding: 10px 0;
	}
	#header-box nav {
		/* background: #bababa; */
		background: #f4f2f2;
		width: 100%;
		padding: 10px 5px 5px;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	#header-box nav.cart {
		display: none;
	}
	#header-box nav li.logo {
		display: none;
	}
	/* ロゴ */
	.sp-logo h2 a {
		display: block;
		width: 80px;
		margin: 0 auto;
	}
	/* ハンバーガーメニュー */
	#navToggle {
		font-size: 3em;
		float: left;
		cursor: pointer;
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		height: 100%;
	}
	#navToggle i {
		vertical-align: middle;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	/* ボタン閉 */
	#navToggle {
		position: absolute;
		left: 0px;
		top: 20px;
		width: 50px;
		height: 60px;
		cursor: pointer;
		display: block;
		padding: 10px 10px 10px;
	}
	#navToggle div {
		position: relative;
	}
	#navToggle span {
		display: block;
		position: absolute;
		width: 30px;
		border-bottom: solid 4px #000;
		transition: 0.35s ease-in-out;
	}
	#navToggle span:nth-child(1) {
		top: 0;
	}
	#navToggle span:nth-child(2) {
		top: 11px;
	}
	#navToggle span:nth-child(3) {
		top: 22px;
	}
	/* ボタン開 */
	.openNav #navToggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.openNav #navToggle span:nth-child(2),
	.openNav #navToggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.openNav nav {
		-moz-transform: translateY(351px);
		-webkit-transform: translateY(351px);
		transform: translateY(351px);
	}
	/* ハンバーガーメニューの中身の商品一覧 */
	.header-item-list {
		display: block;
		top: 86px;
		position: absolute;
		z-index: 1;
		background-color: #fafafa;
		width: 100%;
		padding: 10px;
		border-top: 3px solid #cccccc;
	}
	.header-item-list p {
		font-weight: bold;
	}
	.header-item-list ul {
		overflow: hidden;
		margin: 0 0 20px 0;
	}
	.header-item-list ul li {
		float: left;
		margin: 0 10px 0 0;
	}
	.header-item-list ul li a i {
		margin: 0 3px 0 0;
	}
	/* footer固定のメニュー */
	ul#mainMenu li {
		/* margin:0 8px 0 0; */
		margin: 0 10px 0 0;
	}
	ul#mainMenu li:last-child {
		margin-right: 0;
	}
	ul#mainMenu li a {
		padding: 0;
		width: 45px;
		position: relative;
	}
	ul#mainMenu li.ico img {
		display: inline;
		width: 100%;
		border: solid 3px #fff;
		margin: 0 0 10px 0;
	}
	ul#mainMenu li span {
		font-size: 0.3rem;
		line-height: 1.3em;
		display: block;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	#mainMenu li a > span .num {
		right: -5px;
		bottom: 0;
		position: absolute;
		font-size: 0.7rem;
	}

	/*----------------------------------------------------
	メイン
----------------------------------------------------*/
	#contents {
		background: none;
		overflow: visible;
	}
	.inner80 {
		width: 90%;
	}

	/*----------------------------------------------------
	フッター
----------------------------------------------------*/
	footer {
		padding: 0 0 80px 0;
	}
	/* カート画面以降はリセット */
	#contents.cart footer {
		padding: 0;
	}
	#footer {
		padding: 50px 5% 5%;
	}
	/* sns */
	.sns_area {
		padding: 10px 5px;
	}
	.sns_area ul li {
		display: block;
		margin: 0;
	}
	.sns_area ul li a {
		width: 300px;
		margin: 0 auto;
	}

	/* -----------------------------------------------------------
	テーブル
----------------------------------------------------------- */
	table {
		border-bottom: 1px solid #746c67;
		border-left: 1px solid #746c67;
	}
	table th {
		border-left: none;
		border-bottom: none;
		padding: 5px;
		text-align: left;
	}
	table th,
	table td {
		border-left: none;
		border-right: none;
		border-bottom: none;
		display: block;
		width: 100%;
		padding: 5px;
	}
	table.clear th,
	table.clear td {
		display: table-cell;
	}

	/*----------------------------------------------------
	カレンダー
----------------------------------------------------*/
	.calender_box {
		padding: 5%;
	}
	.calender_box .calendar_wrap .calendar_item {
		width: 45%;
		margin: 15px 2% 15px;
	}
	table.welcart_calendar {
		table-layout: fixed;
		width: 100%;
	}
	table.welcart_calendar th,
	table.welcart_calendar td {
		display: table-cell;
	}
	.mypage table th,
	.mypage table td {
		padding: 5px;
	}
} /*スマホの終了タグ*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
----------------------------------------------------------------
	タブレット
----------------------------------------------------------------
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
	#header_right {
		padding: 10px 0;
	}
	/* footer固定のメニュー */
	ul#mainMenu li {
		margin: 0 35px 0 0;
	}
	ul#mainMenu li a {
		width: 90px;
		text-align: center;
	}
	ul#mainMenu li span {
		font-size: 1rem;
	}
	#mainMenu li a > span .num {
		bottom: 12px;
	}

	/*----------------------------------------------------
	トップ　新着商品　ITEMLIST
----------------------------------------------------*/
	#contents .mainmenu ul li {
		width: 30%;
	}
	/*----------------------------------------------------
	カレンダー
----------------------------------------------------*/
	.calendar_single {
		width: 42%;
	}
	.calendar_left .calendar_single:nth-child(even) {
		float: left;
	}
	.calendar_left .calendar_single:nth-child(odd) {
		float: right;
	}
	.calendar_readme {
		clear: both;
	}
	/*----------------------------------------------------
	フッター
----------------------------------------------------*/
	footer {
		padding: 0 0 15px 0;
	}
	.copyright {
		font-size: 1em;
	}
}
/*タブレットの終了タグ*/