@charset "utf-8";
/*
Theme Name: NWNL Child
Theme URI: https://idia.jp/
Description: WordPressテーマ「NWNL」の子テーマです。
Template: nwnl
Author: YOSHIDA Takayuki
Author URI: https://www.nowebnolife.com/
Version: 0.1
*/

/* レイアウト：ボーダーサイジング */
* {
	box-sizing: border-box;
}

/* カラー */
:root {
	--color-black: #000000;
	--color-white: #ffffff;
	--color-dark: #222222;
	--color-gray: #555555;
	--color-ash: #bbbbbb;
	--color-snow: #eeeeee;
	--color-gold: #aa0000;
	--color-red: #ff0000;
}

header {
	background: var(--color-white);
}
footer {
	background: var(--color-snow);
	width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
	.single footer {
		padding-bottom: 6rem;
	}
}

/* レイアウト */
section {
	margin-bottom: 2rem;
}
.wrapper-content {
	margin-bottom: 3rem;
}
main {
	width: 100%;
}
aside {
	width: 100%;
}
.page-template-cart aside {
	display: none;
}
@media screen and (min-width: 768px) {
	.wrapper-content {
		display: flex;
		flex-flow: row-reverse;
	}
	.single .wrapper-content {
		display: block;
	}
	main {
		width: 70%;
	}
	.page-template-cart main {
		width: 100%;
	}
	.single main {
		width: 100%;
	}
	aside {
		width: 30%;
		padding-right: 2rem;
	}
	.single aside {
		width: 100%;
		padding-right: 0;
	}
}

/* レイアウト：同格リスト */
.appositive-list {
	width: calc(100% + 1.6rem);
	position: relative;
	left: -0.8rem;
}
.appositive-list ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}
.appositive-list ul li {
	list-style-type: none;
	text-align: center;
	background: #eee;
}
/* レイアウト：同格リスト：SP */
.appositive-list ul.al-sp-1 li {
	width: calc(100%/1);
}
.appositive-list ul.al-sp-2 li {
	width: calc(100%/2);
}
.appositive-list ul.al-sp-3 li {
	width: calc(100%/3);
}
.appositive-list ul.al-sp-4 li {
	width: calc(100%/4);
}
.appositive-list ul.al-sp-5 li {
	width: calc(100%/5);
}
.appositive-list ul.al-sp-6 li {
	width: calc(100%/6);
}
.appositive-list ul.al-sp-7 li {
	width: calc(100%/7);
}
.appositive-list ul.al-sp-8 li {
	width: calc(100%/8);
}
.appositive-list ul.al-sp-9 li {
	width: calc(100%/9);
}
/* レイアウト：同格リスト：TB */
@media screen and (min-width: 600px) and (max-width:960px) {
	.appositive-list ul.al-tb-1 li {
		width: calc(100%/1);
	}
	.appositive-list ul.al-tb-2 li {
		width: calc(100%/2);
	}
	.appositive-list ul.al-tb-3 li {
		width: calc(100%/3);
	}
	.appositive-list ul.al-tb-4 li {
		width: calc(100%/4);
	}
	.appositive-list ul.al-tb-5 li {
		width: calc(100%/5);
	}
	.appositive-list ul.al-tb-6 li {
		width: calc(100%/6);
	}
	.appositive-list ul.al-tb-7 li {
		width: calc(100%/7);
	}
	.appositive-list ul.al-tb-8 li {
		width: calc(100%/8);
	}
	.appositive-list ul.al-tb-9 li {
		width: calc(100%/9);
	}
}
/* レイアウト：同格リスト：PC */
@media screen and (min-width: 960px) {
	.appositive-list ul.al-pc-1 li {
		width: calc(100%/1);
	}
	.appositive-list ul.al-pc-2 li {
		width: calc(100%/2);
	}
	.appositive-list ul.al-pc-3 li {
		width: calc(100%/3);
	}
	.appositive-list ul.al-pc-4 li {
		width: calc(100%/4);
	}
	.appositive-list ul.al-pc-5 li {
		width: calc(100%/5);
	}
	.appositive-list ul.al-pc-6 li {
		width: calc(100%/6);
	}
	.appositive-list ul.al-pc-7 li {
		width: calc(100%/7);
	}
	.appositive-list ul.al-pc-8 li {
		width: calc(100%/8);
	}
	.appositive-list ul.al-pc-9 li {
		width: calc(100%/9);
	}
}

/* 文字サイズ */
html {
	font-size: 16px;
	overflow-x: hidden;
}

/* リンク */
a:link {
	color: var(--color-gray);
	text-decoration: none;
}
a:visited {
	color: var(--color-gray);
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: var(--color-gray);
}
a:focus {
	color: var(--color-gray);
}
a img:hover {
	opacity: 0.75;
}

/* ヘッダー：デスクリプション */
.description {
	text-align: left;
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 0.5rem 0;
}

/* ヘッダー：ロゴ */
.logo {
	font-size: 1.3rem !important;
	font-weight: normal !important;
	line-height: 1;
	margin-bottom: 1rem;
}
.logo a {
	color: var(--color-black);
}

/* ヘッダー：メニュー */
.menu-header-nav-container {
	background: var(--color-white);
	display: none;
	width: 100%;
}
.header-menu-button {
	text-align: center;
	font-size: 0.7rem;
	background: var(--color-snow);
	cursor: pointer;
	width: 100vw;
	padding: 0.5rem;
	position: relative;
	left: -1rem;
}
.menu-header-nav-container ul {
	padding: 0;
	margin: 0;
	font-size: 0.9rem;
}
.menu-header-nav-container ul li {
	list-style-type: none;
	padding: 1rem;
}
.menu-header-nav-container ul li a {
	color: var(--color-dark);
}
@media screen and (min-width: 600px) {
	.menu-header-nav-container {
		display: block;
		position: relative;
	}
	.header-menu-button {
		display: none;
	}
	.menu-header-nav-container ul {
		display: flex;
		justify-content: flex-end;
	}
	.menu-header-nav-container ul li {
		line-height: 1;
	}
}

/* ヘッダー：見出し1 */
h1 {
	color: var(--color-white);
	margin: 0 auto !important;
	padding: 0 !important;
	font-size: 1rem !important;
	max-width: 990px !important;

}
.wrapper-h1 {
	width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
	background: var(--color-black);
	padding: 0.5rem;
	z-index: 100;
}
.wrapper-h1.fixed {
	position: fixed;
	top: 0;
	background: rgba(0,0,0,0.9);
}
.wrapper-h1.fixed h1 {
	font-size: 0.8rem !important;
}

/* 見出し */
h2 {
	font-size: 1rem;
	color: var(--color-dark);
	font-family: serif;
}
h3 {
	font-size: 0.9rem;
	color: var(--color-gray);
	background: var(--color-snow);
	padding: 0.5rem;
	font-weight: normal;
}

/* 段落 */
p {
	font-size: 0.9rem;
	color: var(--color-dark);
	text-align: justify;
}

/* 表 */
table {
	border: solid 1px var(--color-ash);
	font-size: 0.9rem;
	width: 100%;
	margin-bottom: 1rem;
}
th {
	padding: 0.5rem;
	white-space: nowrap;
	display: block;
	background: var(--color-snow);
	font-weight: normal;
}
td {
	padding: 0.5rem;
	display: block;
}
@media screen and (min-width: 768px) {
	th,
	td {
		display: table-cell;
	}
}

/* リスト */
ul,
ol {
	font-size: 0.9rem;
	padding-left: 1rem;
}
dl {
	font-size: 0.9rem;
}
dt {
	font-weight: bold;
	color: var(--color-gray);
	margin-bottom: 0.25rem;
}
dd {
	margin: 0;
}
dd + dt {
	margin-top: 0.5rem;
}

/* 非表示 */
.hidden {
	display: none;
}

/* 目立たせる */
.highlight {
	color: var(--color-red);
}

/* パンくず */
.crumb {
	font-size: 0.7rem;
	color: var(--color-gray);
	padding: 1rem 0;
	text-align: right;
}
.crumb a {
	color: var(--color-gray);
}

/* 商品一覧 */
.appositive-list ul li {
	background: none;
}
.item-unit {
	padding: 0.8rem 0.8rem 2rem;
	max-width: 200px;
	margin: 0 auto;
	height: 100%;
}
.item-brand {
	background: var(--color-dark);
	color: var(--color-white);
	font-size: 0.7rem;
	padding: 0 0.25rem;
}
.item-image img {
	width: 200px;
}
.item-stock {
	font-size: 0.7rem;
	padding-bottom: 0.5rem;
}
.stock-onsale {
	display: block;
	color: var(--color-white);
	background: var(--color-gold);
}
.stock-soldout {
	display: block;
	color: var(--color-white);
	background: var(--color-gray);
}
.item-title {
	text-align: left;
	font-size: 0.8rem;
}
.item-title a {
	color: var(--color-dark);
	
}
.item-number {
	color: var(--color-ash);
	font-size: 0.8rem;
	text-align: left;
	padding-bottom: 0.5rem;
}
.item-price {
	text-align: left;
}
.price-pre {
	font-size: 0.8rem;
}
.price-now {
	font-size: 0.9rem;
	font-weight: bold;
	display: block;
	color: var(--color-gold);
}

/* ページャー */
.pager {
	display: flex;
	justify-content: center;
}
.pager a,
.pager span {
	padding: 0.5rem;
}
.pager span {
	color: var(--color-gold);
}

/* サイドバー：よく検索される */
aside > div:nth-child(2) ul {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
}
aside > div:nth-child(2) ul li {
	list-style-type: none;
	margin-right: 1rem;
}
aside > div:nth-child(2) ul li::before {
	content: '#';
	color: var(--color-ash);
}

/* サイドバー：ブランド一覧 */
aside > div:nth-child(3) ul {
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}
aside > div:nth-child(3) ul li {
	list-style-type: none;
}
aside > div:nth-child(3) ul li ul {
	margin-bottom: 1rem;
}
aside > div:nth-child(3) ul li a {
	border-bottom: dotted 1px var(--color-gray);
	display: block;
	padding: 0.5rem;
}
aside > div:nth-child(3) ul li ul li a {
	border: none;
	padding: 0.25rem;
}

/* サイドバー：検索フォーム */
aside #searchform label {
	display: none;
}

/* フッター：メニュー */
.menu-footer-nav-container ul {
	justify-content: center;
	font-size: 0.9rem;
	margin: 0;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
}
.menu-footer-nav-container ul li {
	padding: 0.5rem 1rem;
	list-style-type: none;
}
.menu-footer-nav-container ul li a {
	color: var(--color-dark);
}

/* フッター：コピーライト */
small {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	padding: 1rem;
}

/* 商品詳細：レイアウト */
@media screen and (min-width: 768px) {
	.wrapper-single {
		display: flex;
		flex-direction: row;
	}
	.wrapper-single.reverse {
		flex-direction: row-reverse;
	}
	.single-left {
		width: 50%;
		padding-right: 2rem;
	}
	.single-right {
		width: 50%;
	}
}

/* 商品詳細：価格 */
.single-price {
	background: var(--color-dark);
	color: var(--color-white);
	text-align: center;
	font-size: 1rem;
	font-weight: bold;
}

/* 商品詳細：画像 */
.single-image {
	background: var(--color-black);
	text-align: center;
}
/*
@media screen and (min-width: 400px) {
	.single-image img {
		max-width: calc(400px - 2rem);
	}
}
*/
.single-image-thumbnail {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.single-image-thumbnail img {
	width: 50px;
	margin: 0 0.5rem;
}
@media screen and (min-width: 768px) {
	.single-image-thumbnail img {
		width: 100px;
		margin: 0;
	}
}

/* 商品詳細：カート */
.wrapper-cart {
	width: 100vw;
	position: fixed;
	bottom: 0;
	background: rgba(255,255,255,0.9);
	padding: 1rem;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 10px #ccc;
	z-index: 90;
}
@media screen and (min-width: 768px) {
	.wrapper-cart {
		width: 100%;
		position: relative;
		box-shadow: none;
		border: solid 1px #ccc;
	}
}
.wrapper-cart input,
.button_next input,
#searchsubmit {
	font-size: 0.9rem;
	border: none;
	background: var(--color-gold);
	color: var(--color-white);
	padding: 0.75rem 0.5rem;
	width: 100%;
	font-weight: bold;
	border-radius: 0.25rem;
	margin-bottom: 0.5rem;
	cursor: pointer;
}
.wrapper-cart input:hover,
.button_next input:hover {
	opacity: 0.9;
}
.button_next,
.button_prev {
	text-align: center;
	padding: 0.5rem 0;
}
.button_prev input,
.button_prev a {
	font-size: 0.9rem;
	border: none;
	background: var(--color-gray);
	color: var(--color-white);
	padding: 0.75rem 0.5rem;
	width: 100%;
	font-weight: bold;
	border-radius: 0.25rem;
	cursor: pointer;
	display: block;
}
.wrapper-cart div {
	max-width: 300px;
	margin: 0 auto;
}
.wrapper-cart p {
	font-size: 0.9rem;
	text-align: center;
	background: var(--color-gray);
	color: var(--color-white);
	padding: 0.75rem 0.5rem;
	margin: 0 auto 0.5rem;
	width: 100%;
	font-weight: bold;
	border-radius: 0.25rem;
}
.wrapper-cart ul {
	font-size: 0.8rem;
}

/* さらに */
.more-link {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	position: relative;
	font-size: 0.8rem;
}
.more-link a {
	display: block;
	text-align: center;
	padding: 0.5rem;
	background: var(--color-snow);
}
.more-link::after {
	content: '>';
	line-height: 2.2rem;
	position: absolute;
	right: 1rem;
	top: 0;
}

/* 上へ */
.totop {
	color: var(--color-gray);
	display: block;
	background: var(--color-white);
	text-align: center;
	width: 2rem;
	height: 2rem;
	position: fixed;
	bottom: 0.5rem;
	right: 0.5rem;
	font-size: 0.8rem;
	z-index: 100;
	cursor: pointer;
	box-shadow: 0 0 10px #ccc;
	border-radius: 1rem;
}
.totop span {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid var(--color-ash);
	position: relative;
	top: -6px;
}

/* フォーム */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
#s {
    width: 100%;
}
#s {
	margin-bottom: 0.5rem;
}

/* サイドバー：人気の投稿 */
.wpp-list li {
	padding-bottom: 0.5rem;
}
.wpp-list li:nth-child(1)::before {
	content: '1';
	background: var(--color-gold);
	color: var(--color-white);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(2)::before {
	content: '2';
	background: var(--color-dark);
	color: var(--color-white);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(3)::before {
	content: '3';
	background: var(--color-gray);
	color: var(--color-white);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(4)::before {
	content: '4';
	background: var(--color-snow);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(5)::before {
	content: '5';
	background: var(--color-snow);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(6)::before {
	content: '6';
	background: var(--color-snow);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}
.wpp-list li:nth-child(7)::before {
	content: '7';
	background: var(--color-snow);
	line-height: 1.4rem;
	border-radius: 0.7rem;
	width: 1.4rem;
	height: 1.4rem;
	display: inline-block;
	text-align: center;
}

.drawer-handle {
	position: relative;
	cursor: pointer;
}
.drawer-handle::after {
	content: '▼ CLICK TO OPEN ▼';
	color: var(--color-ash);
	font-size: 0.8rem;
	padding: 0 1rem;
}
.drawer-handle.active::after {
	content: '▲ CLICK TO CLOSE ▲';
}
.drawer p,
.drawer table {
	display: none;
}