@charset "utf-8";
/* **************************************************************** *
 * @desc@ もちハム
 * @edit@ 2025/06/20
 * **************************************************************** */
body{
	background:#fffded;
	color:#796a55;
}
img{
	max-width:100%;
	line-height:0;
	vertical-align:bottom;
}
a{
	color:#6d4e32;
	transition:all 0.3s;
}
a:hover{
	color:#f4a25a;
}
a img{
	transition:all 0.3s;
}
a:hover img{
/*	opacity:0.6; */
}
h1,h2,p{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
	margin:0;
	padding:0;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
}
/* ================================================================ *
 * @desc@ レイアウト
 * ================================================================ */
#Wrap{
}
#Container{
	position:relative;
	margin:0 auto;
	padding:0 0 90px;
	width:920px;
}
#MainContent{
	padding:30px 50px 0;
}
#Container.double #MainContent{
	padding:30px 0 0 240px;
}
#SubContent{
	position:absolute;
	left:0;
	top:15px;
	z-index:300;
	margin-top:30px;
	width:200px;
	transition:all 0.3s;
}
#SubContent.float{
}
#SubContent>div{
	margin-bottom:15px;
	border:3px solid #bb975d;
	border-radius:8px;
	padding:0 0 10px;
	background:#f7e8c7 url(../img/bg01.png) center repeat;
}
#SubContent>div>h1{
	margin:0;
	padding:2px 0 5px;
	background:#bb975d;
	text-align:center;
}
#SubContent ul{
	list-style:none;
	margin:8px 0 0;
	padding:0 3px;
	font-size:1.4rem;
	line-height:1.4em;
}
#SubContent ul li{
	position:relative;
	margin:0;
	padding:8px 0 5px 25px;
}
#SubContent ul li:before{
	content:'●';
	position:absolute;
	left:4px;
	top:10px;
	margin:0;
	padding:0;
	color:#bb975d;
	font-size:16px;
	line-height:1em;
}
#SubContent ul li.new:after{
	position:absolute;
	left:1px;
	top:0;
	display:block;
	color:#c44;
	font-size:10px;
	line-height:1em;
	content:'NEW';
}
#SubContent ul li a{
	display:block;
	color:#302523;
	font-weight:bold;
	text-decoration:none;
}
#SubContent ul li a:hover{
	color:#e55293;
}
#SubContent ul li.cur a,
#SubContent ul li.cur a:hover{
	color:#e55293;
	text-shadow:none;
	cursor:default;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Container{
		padding:0 10px 90px;
		width:auto;
	}
	#Container.double #MainContent{
		padding:30px 0 0 0;
	}
	#SubContent{
		position:fixed;
		left:-350px;
		top:20px;
		bottom:0;
		margin-top:20px;
		width:350px;
	}
	#SubContent.show{
		left:0;
	}
	#SubContent>div{
		margin:0;
		border-width:2px 2px 2px 0;
		border-radius:0 4px 4px 0;
		padding:10px 10px 20px;
	}
	#SubContent ul{
		list-style:none;
		margin:0;
		padding:0 5px;
		font-size:1.3rem;
		line-height:1.5em;
	}
	#SubContent ul li{
		display:inline-block;
		padding:13px 0 0 25px;
		white-space:nowrap;
	}
	#SubContent ul li:before{
		top:14px;
	}
	#SubContent ul li.new:after{
		left:1px;
		top:4px;
	}
	#SubContent>.btShow{
		position:absolute;
		right:-44px;
		top:40px;
		z-index:20000;
		margin:0;
		border:none;
		border-radius:0 4px 4px 0;
		padding:0;
		width:44px;
		height:40px;
		background:#bb975d url(../img/bt_sp.png) center no-repeat;
		cursor:pointer;
	}
}
/* ================================================================ *
 * @desc@ 共通ヘッダ
 * ================================================================ */
#Header{
	background:#e0e883 url(../img/hd_bg_01.png) center repeat;
}
#Header>div{
	overflow:hidden;
	position:relative;
	margin:0 auto;
	width:920px;
	padding:20px 0 30px;
}
#Header>div:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#Header h1{
	float:left;
	padding:0 0 0 115px;
	width:275px;
}
#Header nav.main{
	float:left;
	margin:0;
	padding:40px 0 0 50px;
}
#Header nav.main ul{
	display:table;
	table-layout:fixed;
}
#Header nav.main li{
	display:table-cell;
	margin:0;
	padding:0 10px;
	vertical-align:middle;
}
#Header nav.main li a,
#Header nav.main li span{
	position:relative;
	outline:none;
	overflow:hidden;
	display:block;
	padding:10px 4px 0;
	transition:all 0.3s;
}
#Header nav.main li span{
}
#Header nav.main li a img{
	opacity:1;
	-moz-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
#Header nav.main li a:hover img{
	-moz-animation:hdNv 0.2s linear 1;
	-webkit-animation:hdNv 0.2s linear 1;
	-o-animation:hdNv 0.2s linear 1;
	animation:hdNv 0.2s linear 1;
}
#Header nav.main li span img{
	opacity:1;
	-moz-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;
}
@-moz-keyframes hdNv{
	0%{
		-moz-transform:rotate(0deg);
	}
	25%{
		-moz-transform:rotate(-15deg);
	}
	75%{
		-moz-transform:rotate(15deg);
	}
	100%{
		-moz-transform:rotate(0deg);
	}
}
@-webkit-keyframes hdNv{
	0%{
		-webkit-transform:rotate(0deg);
	}
	25%{
		-webkit-transform:rotate(-15deg);
	}
	75%{
		-webkit-transform:rotate(15deg);
	}
	100%{
		-webkit-transform:rotate(0deg);
	}
}
@-o-keyframes hdNv{
	0%{
		-o-transform:rotate(0deg);
	}
	25%{
		-o-transform:rotate(-15deg);
	}
	75%{
		-o-transform:rotate(15deg);
	}
	100%{
		-o-transform:rotate(0deg);
	}
}
@keyframes hdNv{
	0%{
		transform:rotate(0deg);
	}
	25%{
		transform:rotate(-15deg);
	}
	75%{
		transform:rotate(15deg);
	}
	100%{
		transform:rotate(0deg);
	}
}

#Header .hdSnsBox{
	position:absolute;
	right:40px;
	bottom:10px;
}
#Header .hdSnsBox>div>div{
	display:inline-block;
	padding:0 2px;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Header>div{
		width:auto;
		padding:10px 10px 40px;
	}
	#Header h1{
		padding:0;
		width:138px;
	}
	#Header nav.main{
		float:right;
		padding:0;
	}
	#Header nav.main li{
		padding:0;
	}
	#Header nav.main li a{
		transition:all 0.3s;
	}
	#Header nav.main li a img,
	#Header nav.main li span img{
		width:60px
	}
	#Header .hdSnsBox{
		position:absolute;
		right:15px;
		bottom:8px;
	}
	#Header .hdSnsBox>div>div{
		display:inline-block;
		padding:0 2px;
	}
}
/* ================================================================ *
 * @desc@ 共通フッタ
 * ================================================================ */
#Footer{
	position:relative;
	margin:0 auto;
	padding:20px 0;
	width:920px;
	color:#241916;
	text-align:center;
}
#Footer>div{
}
#Footer .copy{
	display:table;
	table-layout:fixed;
	margin:0 auto;
	max-width:890px;
}
#Footer .copy ul{
	display:table-cell;
	font-size:1.0rem;
	line-height:1.4em;
}
#Footer .copy li{
	display:inline-block;
	margin:0 1em 0.5em;
}
#Footer .copy li.bro{
	display:block;
	margin:0.5em 0 0;
	text-align:center;
}
#Footer .bn{
	margin:30px auto 0;
	text-align:center;
}
#Footer .bn>div{
	display:inline-block;
	margin:0 3px 5px;
}
#Footer .totop{
	position:absolute;
	right:15px;
	bottom:20px;
	z-index:2000;
	cursor:pointer;
	transition:all 0.3s ease-in-out;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Footer{
		padding:20px 10px 70px;
		width:auto;
	}
	#Footer .bn{
		margin:10px auto 0;
		text-align:center;
	}
	#Footer .totop{
		position:absolute;
		right:15px;
		z-index:2000;
		cursor:pointer;
		transition:all 0.3s ease-in-out;
	}
}
/* ================================================================ *
 * @desc@ 共通レイアウト
 * ================================================================ */
/* 共通タイトル */
#Container .ctTitle{
	margin:0 auto 30px;
	padding:23px 54px 9px;
	max-width:680px;
	min-height:18px;
	background-color:transparent;
	background-image:url(../img/ttl_bg_02.png),url(../img/ttl_bg_01.png);
	background-position:right bottom,left bottom;
	background-repeat:no-repeat,no-repeat;
}
/* 共有コンテンツボックス */
#Container .ctBox{
	margin:30px auto 0;
	max-width:680px;
}
#Container .ctBox>h1{
	margin:0;
	border-radius:12px 12px 0 0;
	padding:10px 15px 8px 45px;
	background:#bb975d url(../img/ic_title.png) 15px 6px no-repeat;
	color:#fff;
	font-size:2.0rem;
	line-height:1.2em;
	font-weight:bold;
	vertical-align:middle;
}
#Container .ctBox>h1 img{
	line-height:0;
	vertical-align:middle;
}
#Container .ctBox>div{
	margin:0;
	border-radius:0 0 12px 12px;
	padding:30px 15px 15px;
	background:#f7e8c7 url(../img/bg01.png) center repeat;
}
#Container .ctBox .layoutBox{
	display:table;
	table-layout:fixed;
	width:100%;
}
#Container .ctBox .layoutBox>div{
	display:table-cell;
	padding:0 10px;
	vertical-align:top;
}
#Container .ctBox .layoutBox>div:first-child{
	padding-left:0;
}
#Container .ctBox .layoutBox>div:last-child{
	padding-right:0;
}
#Container .ctBox .layoutBox.type01>div.shop{
	width:280px;
	text-align:center;
	vertical-align:bottom;
}
/* 商品画像リスト */
#Container .picBox{
}
#Container .picBox img{
	width:100%;
}
#Container .picBox>ul{
	display:table;
	table-layout:fixed;
	margin:0 auto;
}
#Container .picBox>ul>li{
	display:table-cell;
	padding:0 4px 10px;
	width:156px;
	text-align:center;
	vertical-align:top;
}
#Container .picBox>ul>li:first-child{
	padding-left:0;
}
#Container .picBox>ul>li:last-child{
	padding-right:0;
}
#Container .picBox .name{
	display:block;
	margin:8px 0 0;
	font-size:1.3rem;
	line-height:1.1em;
	font-weight:bold;
}
#Container .picBox .note{
	display:block;
	font-size:1.1rem;
	line-height:1.2em;
	color:#c44;
}
/* 商品ギャラリー */
#Container .galleryBox{
	margin:12px 0 0;
	text-align:center;
}
#Container .galleryBox ul{
	display:inline-block;
	margin:0;
	padding:0;
}
#Container .galleryBox ul>li{
	display:inline-block;
	margin:0;
	padding:8px 8px 0 0;
}
#Container .galleryBox ul>li img{
	border:1px solid #bb975d;
}
#Container .galleryBox ul>li a:hover img{
	border-color:#f4a25a;
}
/* 商品詳細リスト */
#Container .descList{
	margin:20px 0 0;
	font-size:1.3rem;
	line-height:1.6em;
}
#Container .descList li{
	position:relative;
	padding:0 0 0 1.5em;
}
#Container .descList li:before{
	content:'■';
	display:block;
	position:absolute;
	left:0;
	top:0.1em;
	font-size:1.3em;
	line-height:1em;
}
/* ショップリンク */
#Container .shop{
}
#Container .shop p{
	padding:3px 0 0;
}
#Container .shop .release{
	display:inline-block;
	color:#c00;
	text-align:left;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Container .ctBox .layoutBox{
		display:block;
	}
	#Container .ctBox .layoutBox>div{
		display:block;
		padding:10px 0;
	}
	#Container .ctBox .layoutBox.type01>div.shop{
		width:auto;
		text-align:center;
		vertical-align:bottom;
	}
	/* 商品画像リスト */
	#Container .picBox{
		text-align:center;
	}
	#Container .picBox img{
	}
	#Container .picBox>ul{
		display:inline;
	}
	#Container .picBox>ul>li{
		display:inline-block;
		margin:0 auto;
		padding-bottom:0;
		min-height:215px;
	}
	#Container .picBox>ul>li:first-child{
		padding-left:4px;
	}
	#Container .picBox>ul>li:last-child{
		padding-right:4px;
	}
	#Container .picBox .name{
		margin:5px 0 0;
		font-size:1.4rem;
		line-height:1.3em;
	}
}
/* ================================================================ *
 * @desc@ [Top]
 * ================================================================ */
#Top #Container{
	padding-top:25px;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Top #Container{
		padding-top:20px;
	}
}
/* ================================================================ *
 * @desc@ [Top] メインビジュアル
 * ================================================================ */
#Top .visualBox{
	margin:0 auto;
	width:680px;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Top .visualBox{
		position:static;
		margin:0 auto;
		width:340px;
	}
}
/* ================================================================ *
 * @desc@ [Top] 更新履歴 / Twitter
 * ================================================================ */
#Top .updateRule{
	margin:0 auto;
	width:680px;
}
#Top .updateRule:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#Top .updateRule>section{
	position:relative;
	margin:25px 0 0;
	background:#fff;
	color:#796955;
	font-size:1.4rem;
	line-height:1.6em;
}
#Top .updateRule>section>h1{
	border-radius:12px 12px 0 0;
	padding:12px 10px 10px 40px;
	background:#bb975d url(../img/ic_title.png) 12px 9px no-repeat;
	color:#fff;
}
/* 更新履歴 */
#Top .updateBox{
	float:left;
/*	width:360px; */
}
#Top .updateBox>div{
	overflow:hidden;
	border-width:0 4px 4px;
	border-style:solid;
	border-color:#bb975d;
	border-radius:0 0 12px 12px;
}
#Top .updateBox>div>div{
	overflow:auto;
	padding:10px 15px 0 10px;
	height:196px;
}
#Top .updateBox ul{
	display:table;
	table-layout:fixed;
}
#Top .updateBox li{
	display:table-row;
}
#Top .updateBox li>span{
	display:table-cell;
	padding:0 0 10px;
	vertical-align:top;
}
#Top .updateBox li>span.date{
	padding-right:1em;
	white-space:nowrap;
}
#Top .updateBox li>span.desc{
}
/* Twitterウィジェット */
#Top .tweetBox{
	float:right;
	width:300px;
}
#Top .tweetBox>div{
	overflow:hidden;
	border-width:0 4px 4px;
	border-style:solid;
	border-color:#bb975d;
	border-radius:0 0 12px 12px;
	height:206px;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Top .updateRule{
		margin:0 auto;
		width:auto;
	}
	#Top .updateRule>section{
		margin:25px auto 0;
	}
	/* 更新履歴 */
	#Top .updateBox{
		float:none;
		width:300px;
	}
	#Top .updateBox ul{
		display:block;
	}
	#Top .updateBox li{
		display:block;
		padding:0 0 10px;
	}
	#Top .updateBox li>span{
		display:block;
		padding:0;
	}
	/* Twitterウィジェット */
	#Top .tweetBox{
		float:none;
	}
}
/* ================================================================ *
 * @desc@ [Top] ラインナップ
 * ================================================================ */
#Top .lineupBox{
	position:relative;
	margin:50px auto 0;
	width:680px;
}
#Top .lineupBox>h1{
}
#Top .lineupBox ul{
	display:block;
	text-align:center;
}
#Top .lineupBox li{
	position:relative;
	display:inline-block;
	margin:0 10px 10px;
	border:2px solid #bb975d;
	padding:0;
	width:200px;
	height:210px;
	background:#fff;
	vertical-align:middle;
}
#Top .lineupBox li.new:before{
	content:'NEW!';
	position:absolute;
	left:-2px;
	top:-2px;
	z-index:1000;
	padding:2px 12px 1px;
	background:#c44;
	color:#fff;
	font-size:12px;
	line-height:1.0em;
}
#Top .lineupBox ul>li>a{
	box-sizing:border-box;
	position:relative;
	display:block;
	padding:0;
	width:100%;
	height:100%;
	text-decoration:none;
	transition:all 0.3s;
}
#Top .lineupBox ul>li>a>span.pic{
	display:block;
}
#Top .lineupBox ul>li>a>span.name{
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	padding:5px 10px 5px;
	width:180px;
	background:#fff;
	background:-webkit-linear-gradient(
		top,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.8) 50%
	);
	background:-moz-linear-gradient(
		top,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.8) 50%
	);
	background:linear-gradient(
		to bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.8) 50%
	);
	font-size:1.6rem;
	line-height:1.2em;
	font-weight:bold;
	text-align:left;
}
#Top .lineupBox ul>li>a>span.name.long{
	font-size:1.4rem;
	line-height:1.2em;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Top .lineupBox{
		width:auto;
	}
	#Top .lineupBox li{
		margin:0 5px 10px;
		width:160px;
		height:170px;
		vertical-align:middle;
	}
	#Top .lineupBox ul>li>a>span.name{
		padding:5px 10px 5px;
		width:140px;
	}
}
/* ================================================================ *
 * @desc@ [Top] ABOUT
 * ================================================================ */
#Top .aboutBox{
	position:relative;
	margin:70px auto 0;
	border-radius:12px;
	padding:45px 30px 15px;
	width:620px;
	background:#f7e8c7 url(../img/bg01.png) center repeat;
}
#Top .aboutBox>h1{
	position:absolute;
	left:0;
	top:-25px;
	padding:0 25px;
}
#Top .aboutBox>div{
}
#Top .aboutBox>div:after{
	content:" ";clear:both;overflow:hidden;display:block;
	visibility:hidden;margin-bottom:-1px;height:1px;
	font-size:1px;line-height:1px;
}
#Top .aboutBox .pic{
	float:right;
	width:114px;
}
#Top .aboutBox .desc{
	float:left;
	padding-left:10px;
	width:490px;
}
/* ---------------------------------------------------------------- *
 * @desc@ スマホ用
 * ---------------------------------------------------------------- */
@media screen and (max-width:640px){
	#Top .aboutBox{
		margin:70px 0 0;
		padding:45px 15px 15px;
		width:auto;
	}
	#Top .aboutBox>h1{
		padding:0;
		width:100%;
		text-align:center;
	}
	#Top .aboutBox .pic{
		float:none;
		margin:0 auto;
	}
	#Top .aboutBox .desc{
		float:none;
		padding:15px 0 0;
		width:auto;
		text-align:center;
	}
}