@charset "utf-8";

/*=== Box-sizing ===*/
*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body {
	background-color: #000;
	font-family:'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 200;
}

br.forPc {
	display: block;
}

br.forSp {
	display: none;
}


#wrapper {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
}

.respImg img {
	height: auto;
	width: 100%;
}

.respImgMax img {
	height: auto;
	max-width: 100%;
}

.respImgHlf img {
	height: auto;
	width: 100%;
}

.respImgMin img {
	height: auto;
	width: 70%;
}

.respImgSht img {
	height: auto;
	width: 50%;
}

/* プレゼント */
.present {
	display: flex;
	padding-top: 2.5%;
	padding-bottom: 2.5%;
	margin-top: 2.5%;
	margin-bottom: 2.5%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #666;
	border-bottom-color: #666;
}

.tennai {
	width: 34%;
	padding-right: 5%;
	padding-top: 3%;
}

.tennai img {
	border-radius: 20px; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.rightTxtArea {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 2vw;
}

h1 {
	font-family: 'Noto Serif JP', serif;
	font-size: 2.2vw;
	line-height: 130%;
	font-weight: 700;
	color: #F90;
	padding-bottom: 2%;
	letter-spacing: 0.03em;
}

h1 br.forPc {
	display: block;
}

h1 br.forSp {
	display: none;
}

.h1Large {
	font-size: 150%;
	line-height: 130%;
	font-weight: 700;
}

.h1red {
	font-size: 150%;
	line-height: 130%;
	font-weight: 700;
	color: #F00;
}

.detail {
	width: 100%;
	list-style-type: none;
	padding-bottom: 2%;
}

.detail li,
.detail li.nonIndent {
	font-size: 1.28vw;/*1.13*/
	line-height: 140%;
	font-weight: 300;
	color: #FFF;
	text-indent: -1.5em;
	padding-left: 1.5em;
	padding-bottom: 0.8%;
}

.detail li.title {
	list-style-type: none;
	font-size: 1.3vw;
	padding-left: 0.85em;
	font-weight: 400;
	padding-bottom: 0%;
	color: #F90;
	letter-spacing: 0.2em;
}

/* ボタン */
.presentBtnArea {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 1vw;
}

.presentBtn a,
.presentBtn a:visited {
	font-size: 1.4vw;
	font-weight: 500;
	color: #000;
	text-align: center;
	width: 100%;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #F90;
	display: block;
	text-decoration: none;
}

.presentBtn a:hover {
	background-color: #E84117;
}

/* 商品名 */
h2 {
	font-size: 1.26vw;
	line-height: 130%;
	font-weight: 400;
	padding-bottom: 1%;
	color: #FFF;
}

h2 br.pcNon {
	display: none;
}

/* 内容量 */
h3 {
	font-size: 1vw;
	line-height: 160%;
	text-indent: -3.3em;
	padding-left: 3.3em;
	padding-bottom: 8px;
	color: #FFF;
	font-weight: 200;
}

/* 価格 */
h4 {
	font-size: 1.4vw;
	line-height: 160%;
	color: #FFF;
	font-weight: 400;
}


/* プレミアム */
h2.premiumH2 {
	font-size: 2.8vw;
	line-height: 130%;
	color: #CE4232;
	text-align: center;
	padding-bottom: 8px;
	font-weight: 300;
}

h3.premiumH3 {
	font-size: 1.8vw;
	line-height: 130%;
	font-weight: 200;
	color: #FFF;
	text-align: center;
}

h3.premiumH3 br {
	display: none;
}

/* プレミアムセット */
.wide {
	padding-top: 3%;
}


.wide img {
	border-radius: 16px; 
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px; 
}

.premiumSet {
	display: flex;
	/*justify-content: space-between;*/
	padding-top: 3.5%;
	padding-bottom: 4%;
}

.premiumLeft {
	width: 48%;
}

.premiumLeft img {
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px; 
}

.premiumRight {
	display: flex;
	justify-content: space-between; 
	width: 100%;
}

.halfSpec {
	width: 33%;
}

.halfSpec img {
	border-radius: 16px; 
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}

/* アソート */
h2.assortH2 {
	font-size: 2.8vw;
	line-height: 130%;
	color: #CE4232;
	text-align: center;
	padding-bottom: 1.4%;
	font-weight: 300;
	width: 100%;
}

h3.assortH3 {
	font-size: 1.38vw;
	line-height: 150%;
	font-weight: 200;
	color: #FFF;
	text-align: center;
	width: 100%;
	padding-left: 0px;
	text-indent: 0px;
}

h3.assortH3 br.spNon {
	display: block;
}

/* サブタイトル */
.subTitle {
	padding-bottom: 2%;
	padding-top: 5%;
}

.subTitleArea {
	width: 100%;
	margin-bottom: 0%;
	padding-bottom: 2%;
	padding-top: 5%;
}

br.pecanBr {
	display: block;
}

/* (1)assort（アソート） */
.assort {
	display:flex;
	justify-content: space-between;
	padding-top: 3.5%;
	padding-bottom: 4%;
}

.assortLeft {
	width: 31.5%;/*48*/
}

.assortLeft img {
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}

.assortRight {
	width: 31.5%;/*48*/
}

.assortRight img {
	border-radius: 16px; 
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
}

.asotRightBtm {
	display: block;/*flex*/
}

.assortRleft {
	width: 100%;/*58*/
	margin-bottom: 1.5vw;
}

.assortRright {
	width: 260px;
}

/* (2)pecan（ペカンナッツ） */

.pecanTop {
	margin-bottom: 3.5%;
	padding-top: 3.5%;
}

.pecanTop img {
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}

.pecan {
	text-align: left;
	display: flex;
	justify-content: space-between;
	padding-bottom: 5%;
	padding-top: 20px;/*36px*/
}

.pecanLeft {
	width: 48%;
}

.pecanRight {
	width: 48%;
}

.pecan8spec {
	width: 100%;
}

/* (3)pecan（ペカンナッツ）単体3商品 */
.pecanSingle {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 5%;/*3.5%*/
}

.single30,
.single30Narrow {
	width: 28%;
}

.narrow {
	width: 270px;
	/*margin-left: 20px;*/
}

.simage img {
	border-radius: 30px; 
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}

.spNon {
	display: block;
}

/* ショップボタン */
.shopBtn {
	padding-bottom: 1vh;
}


/*=== アコーデオン ===*/
.container
{
	width: 260px;/*260px*/
}

p.trigger
{
	width: 260px;
}

.toggle_container {
	width: 260px;
}

.toggle_containerWide {
	width: 40vw;/*580px*/
}


.toggle_container .block {
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #000;
	opacity: 0.85;/*0.85*/
	padding-right: 0px;/*6*/
	padding-left: 0px;/*6*/
	width: 260px;/*248*/
}

.toggle_container .blockWide {
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #000;
	opacity: 0.85;/*0.85*/
	padding-right: 0px;/*6*/
	padding-left: 0px;/*6*/
	width: 40vw;/*580px*/
}

/*
.toggle_container .block {
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #000;
	opacity: 0.85;
	padding-right: 0px;
	padding-left: 0px;
	width: 248px;
}
*/

.toggle_container .block p.blockTxt,
.toggle_containerWide .blockWide p.blockTxt{
	font-size: 13px;
	line-height: 180%;
	color: #FFF;
	font-weight: normal;
}

.close {
	text-align: right;
}

.close a,
.close a:visited {
	color: #FFF;
	font-size: 80%;
	line-height: 120%;
	text-decoration: none;
}

.close a:hover {
	color: #FFF;
	text-decoration: underline;
}

/* 左1/3　イメージ */
.leftImg {
	padding-top: 3%;
}


.leftImg img {
	border-radius: 16px;  
}

/*=== フッター ===*/
.footerArea {
	display:flex ;
	padding-bottom: 3%;
}

.leftPhoto {
	width: 50%;
}

.rightExplanation {
	width: 50%;
	padding-left: 3%;
}

.rightCopy {
	font-size: 0.9vw;
	line-height: 170%;
	color: #CCC;
	padding-bottom: 2%;
	letter-spacing: 0.1em;
}

footer {
	padding-top: 2%;
	padding-bottom: 3%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CD4132;
}

/*=== ページトップ ===*/
.pagetop{
	position: fixed;
	bottom: 120px;
	height:48px;
	width:48px;
	cursor:pointer;
	margin-left: 86%;
	opacity: 0.7;
}

.pagetop:hover {
	opacity: 1;
}

/* スペース */
.center {
	text-align: center;
}

.btm4 {
	padding-bottom: 4px;
}

.btm10 {
	padding-bottom: 10px;
}

.btm20 {
	padding-bottom: 20px;
}

.btm30 {
	padding-bottom: 30px;
}

.btm40 {
	padding-bottom: 40px;
}

.btm50 {
	padding-bottom: 50px;
}

.btm60 {
	padding-bottom: 60px;
}


.top20{
	padding-top: 20px;
}

.halfSpec .shopBtn img,
.assortRright .shopBtn img {
	border-radius: 0px; 
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}


@media screen and (max-width: 767px){ /*768-992*/


body {
	background-color: #000;
	font-family:'Noto Sans JP', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 200;
}

br.forPc {
	display: none;
}

br.forSp {
	display: block;
}

#wrapper {
	width: 94%;/*1200px*/
	margin-right: auto;
	margin-left: auto;
	background-image: url(../item-2022/2022main.png);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: left;
	background-size: contain;
}

.respImg img {
	height: auto;
	width: 100%;
}

.respImgHlf img {
	object-fit: cover;
	height: 220px;
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 8%;
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
}

.respImgMin img {
	height: auto;
	width: 85%;
}

.respImgSht img {
	height: auto;
	width: 80%;
}

/* プレゼント */
.present {
	display: flex;
	flex-wrap: wrap;
	padding-top: 4%;
	padding-bottom: 4%;
	margin-top: 4%;
	margin-bottom: 4%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #666;
	border-bottom-color: #666;
}

.tennai {
	width: 80%;
	padding-right: 0%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 3%;
}

.tennai img {
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

.rightTxtArea {
	width: 94%;
	margin-right: auto;
	margin-left: auto;
}

h1 {
	font-family: 'Noto Serif JP', serif;
	font-size: 5vw;
	line-height: 160%;
	font-weight: 700;
	color: #F90;
	padding-bottom: 4%;
	text-align: center;
	letter-spacing: 0em;
}

h1 br.forSp {
	display: block;
}


.h1Large {
	font-size: 145%;
	line-height: 130%;
	font-weight: 700;
}

.detail {
	width: 94%;
	list-style-type: none;
	padding-bottom: 6%;
	margin-right: auto;
	margin-left: auto;
}

.detail li {
	font-size: 12px;
	line-height: 140%;
	font-weight: 300;
	color: #FFF;
	text-indent: -1.5em;
	padding-left: 1.5em;
	padding-bottom: 0.8%;
}

.detail li.nonIndent {
	font-size: 12px;
	line-height: 140%;
	font-weight: 300;
	color: #FFF;
	text-indent: 0em;
	padding-left: 0em;
	padding-bottom: 0.8%;
}

.detail li.title {
	list-style-type: none;
	font-size: 15px;
	padding-left: 0.85em;
	font-weight: 400;
	padding-bottom: 0%;
	color: #F90;
	letter-spacing: 0.2em;
	padding-top: 2%;
}

/* ボタン */
.presentBtnArea {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 6%;
}

.presentBtn a,
.presentBtn a:visited {
	font-size: 13px;
	font-weight: 500;
	color: #000;
	text-align: center;
	width: 100%;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #F90;
	display: block;
	text-decoration: none;
}

.presentBtn a:hover {
	background-color: #E84117;
}

/* 商品名 */
h2 {
	font-size: 14px;
	line-height: 130%;
	font-weight: 400;
	padding-bottom: 1%;
	color: #FFF;
}

h2 br.pcNon {
	display: block;
}

/* 内容量 */
h3 {
	font-size: 10px;
	line-height: 160%;
	text-indent: 0em;
	padding-left: 0em;
	padding-bottom: 1%;
	color: #FFF;
	font-weight: 200;
}

/* 価格 */
h4 {
	font-size: 16px;
	line-height: 160%;
	color: #FFF;
	font-weight: 400;
}


/* プレミアム */
h2.premiumH2 {
	font-size: 17px;
	line-height: 130%;
	color: #CE4232;
	text-align: center;
	padding-bottom: 8px;
	font-weight: 400;
}

h3.premiumH3 {
	font-size: 13px;
	line-height: 130%;
	font-weight: 200;
	color: #FFF;
	text-align: center;
}

h3.premiumH3 br {
	display: block;
}

.wide {
	padding-top: 3%;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

/* プレミアムセット */
.premiumSet {
	display: flex;
	flex-wrap: wrap;
	padding-top: 3.5%;
	padding-bottom: 4%;
}

.premiumLeft {
	width: 90%;
	padding-right: 0%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 4%;
}

.premiumLeft img {
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
}

.premiumRight {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.halfSpec {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

/* アソート */
h2.assortH2 {
	font-size: 22px;
	line-height: 130%;
	color: #CE4232;
	text-align: center;
	padding-bottom: 3vw;
	font-weight: 400;
	width: 100%;
	padding-top: 10%;
}

h3.assortH3 {
	font-size: 13px;
	line-height: 150%;
	font-weight: 200;
	color: #FFF;
	text-align: left;
	width: 90%;/*100%*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3%;
	padding-bottom: 0%;
}

h3.assortH3 br.spNon {
	display: none;
}

/* サブタイトル */
.subTitle {
	padding-bottom: 5%;
}

br.pecanBr {
	display: none;
}

.subTitleArea {
	width: 100%;
	margin-bottom: 0%;
	padding-bottom: 0%;
}

/* (1)assort（アソート） */
.assort {
	display:flex;
	flex-wrap: wrap;
	padding-top: 3.5%;
	padding-bottom: 4%;
}

.assortLeft {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 4%;
}

.assortLeft img {
	border-radius: 10px; 
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
}

.assortRight {
	width: 91%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0%;
	margin-bottom: 5%;
}

.asotRightBtm {
	display: flex;
	flex-wrap: wrap;
}

.assortRleft {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 6%;
}

.assortRright {
	width: 260px;
}

/* (2)pecan（ペカンナッツ） */

.pecanTop {
	margin-bottom: 3.5%;
	padding-top: 3.5%;
}

.pecanTop img {
	border-radius: 10px; 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.pecan {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	padding-top: 0%;/*3%*/
	padding-bottom: 5%;/*10%*/
}

.pecanLeft {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.pecanRight {
	width: 90%;
	padding-left: 0%;
	padding-top: 20%;
	margin-right: auto;
	margin-left: auto;
}

.pecan8spec {
	width: 100%;
	padding-left: 0px;
}

/* (3)pecan（ペカンナッツ）単体3商品 */
.pecanSingle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding-bottom: 2.5%;/*3.5*/
}

.single30 {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20%;
}

.single30Narrow {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5%;
	margin-top: 5%;
}

.narrow {
	width: 270px;
	/*margin-left: 20px;*/
}

.spNon {
	display: none;
}

/* ショップボタン */
.shopBtn {
	padding-bottom: 1vh;
}


/*=== アコーデオン ===*/
.container
{
	width: 260px;/*260px*/
	margin-bottom: 10%;
}

p.trigger
{
	width: 260px;
}

.toggle_container {
	width: 260px;
}

.toggle_containerWide {
	width: 260px;
}


.toggle_container .block
{
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #000;
	opacity: 0.85;
	padding-right: 0px;
	padding-left: 0px;
	width: 260px;
}

.toggle_container .blockWide {
	padding-top: 8px;
	padding-bottom: 8px;
	background-color: #000;
	opacity: 0.85;/*0.85*/
	padding-right: 0px;/*6*/
	padding-left: 0px;/*6*/
	width: 260px;/*248*/
}

.toggle_container .block p.blockTxt,
.toggle_containerWide .blockWide p.blockTxt{
	font-size: 13px;
	line-height: 180%;
	color: #FFF;
	font-weight: normal;
}

.close {
	text-align: right;
}

.close a,
.close a:visited {
	color: #FFF;
	font-size: 80%;
	line-height: 120%;
	text-decoration: none;
}

.close a:hover {
	color: #FFF;
	text-decoration: underline;
}

/*=== フッター ===*/
.footerArea {
	display:flex ;
	flex-wrap: wrap;
	padding-bottom: 3%;
}

.leftPhoto {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 8%;
}

.rightExplanation {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0%;
}

.rightCopy {
	font-size: 12px;
	line-height: 170%;
	color: #CCC;
	padding-bottom: 10%;
	letter-spacing: 0.1em;
}

footer {
	padding-top: 2%;
	padding-bottom: 3%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CD4132;
}

/*=== ページトップ ===*/
.pagetop{
	position: fixed;
	bottom: 40px;
	height:48px;
	width:48px;
	cursor:pointer;
	margin-left: 80%;
	opacity: 0.7;
}

.pagetop:hover {
	opacity: 1;
}


.btm20 {
	padding-bottom: 10px;
}

.btm30 {
	padding-bottom: 10px;
}

.btm40 {
	padding-bottom: 10px;
}


.top20{
	padding-top: 10px;
}


}