@charset "Shift_JIS";

/*---------------------------------------------------------- 汎用クラス */
.mt0{ margin-top: 0px !important;}
.mb0{ margin-bottom: 0px !important;}
.pt0{ padding-top: 0px !important;}
.pb0{ padding-bottom: 0px !important;}
.mt5{ margin-top: 5px !important;}
.mb5{ margin-bottom: 5px !important;}
.pt5{ padding-top: 5px !important;}
.pb5{ padding-bottom: 5px !important;}
.mt10{ margin-top: 1.33% !important;}
.mb10{ margin-bottom: 1.33% !important;}
.pt10{ padding-top: 1.33% !important;}
.pb10{ padding-bottom: 1.33% !important;}
.mt15{ margin-top: 15px !important;}
.mb15{ margin-bottom: 15px !important;}
.pt15{ padding-top: 15px !important;}
.pb15{ padding-bottom: 15px !important;}
.mt20{ margin-top: 2.7% !important;}
.mb20{ margin-bottom: 2.7% !important;}
.pt20{ padding-top: 2.7% !important;}
.pb20{ padding-bottom: 2.7% !important;}
.mt25{ margin-top: 25px !important;}
.mb25{ margin-bottom: 25px !important;}
.pt25{ padding-top: 25px !important;}
.pb25{ padding-bottom: 25px !important;}
.mt30{ margin-top: 4% !important;}
.mb30{ margin-bottom: 4% !important;}
.pt30{ padding-top: 4% !important;}
.pb30{ padding-bottom: 4% !important;}
.mt35{ margin-top: 35px !important;}
.mb35{ margin-bottom: 35px !important;}
.pt35{ padding-top: 35px !important;}
.pb35{ padding-bottom: 35px !important;}
.mt40{ margin-top: 5.33% !important;}
.mb40{ margin-bottom: 5.33% !important;}
.pt40{ padding-top: 5.33% !important;}
.pb40{ padding-bottom: 5.33% !important;}
.mt50{ margin-top: 6.67% !important;}
.mb50{ margin-bottom: 6.67% !important;}
.pb50{ padding-bottom: 6.67% !important;}
.mt60{ margin-top: 8% !important;}
.mb60{ margin-bottom: 8% !important;}
.pb60{ padding-bottom: 8% !important;}
.mb70{ margin-bottom: 9.33% !important;}
.mb80{ margin-bottom: 10.66% !important;}
.pb80{ padding-bottom: 10.66% !important;}
.mb100{ margin-bottom: 13.33% !important;}
.mb110{ margin-bottom: 14.33% !important;}
.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}
.ma{margin: auto;}
.cmt_small{font-size: .8em;text-indent: -1em;padding-left: 1em;}
.fl{float: left;}
.fr{float: right;}
.cfx::after{
	content:"";
	display:block;
	clear:both;
}
.bold{font-weight: bold;}

/*------------------------------------------------------- フォント設定 */
.navitopicpath_,.GenreStyle_,.container_{padding: 0!important;}
h2.genre_name_,h2.common_headline2_,div#genre_common_box,.rightmenuframe_{display: none;}
.tdu{text-decoration: underline;}
main{
	container-type: inline-size;
	font-size: clamp(15px, 4vw, 30px);
	line-height: 1.6;
	font-family: "游ゴシック", "Yu Gothic", YuGothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
}
.f54{font-size: 7.2vw;}
.f46{font-size: 1.49em;}
.f44{font-size: 1.38em;}
.f42{font-size: 1.31em;}
.f40{font-size: 1.25em;}
.f38{font-size: 1.19em;}
.f36{font-size: 1.13em;}
.f34{font-size: 1.06em;}
.f32{font-size: 1em;}
.f30{font-size: .94em;}
.f28{font-size: .88em;}
.f26{font-size: .81em;}
.f25{font-size: .78em;}
.f24{font-size: .75em;}
.f22{font-size: .69em;}
.f20{font-size: .62em;}
.f18{font-size: .56em;}
@media (min-width: 750px){
	.f54{font-size: 54px;}
	.f46{font-size: 46px;}
	.f44{font-size: 44px;}
	.f42{font-size: 42px;}
	.f40{font-size: 40px;}
	.f38{font-size: 38px;}
	.f36{font-size: 36px;}
	.f34{font-size: 34px;}
	.f32{font-size: 32px;}
	.f30{font-size: 30px;}
	.f28{font-size: 28px;}
	.f26{font-size: 26px;}
	.f25{font-size: 25px;}
	.f24{font-size: 24px;}
	.f22{font-size: 22px;}
	.f20{font-size: 20px;}
	.f18{font-size: 18px;}
}
.c01{color: #c83724;font-weight: bold;}
main .fv a:link,main .fv a:visited{
	color: inherit;
	text-decoration: underline;
}
div.container_ div.contents_, div.container_ div.contents_ div.mainframe_, div.container_ div.contents_ div.mainframe_ .event_ .goods_, div.container_ div.mainframe_, div.container_ div.mainframe_ .event_ .goods_{width: 100%;}

/*---------------------------------------------------------- 基本設定 */
.main_wrap{
	width: 100%;
	padding-bottom: 6%;
	background-image: url("../../../img/genre/02002301/bg.png");
	background-size: contain;
	background-repeat: repeat;
}
@media(max-width: 749px){.main_wrap{background-image: none;}}

main{
	position: relative;
	display: block;
	max-width: 750px;
	margin: auto;
	background: #fff;
	color: #60290c;
	overflow: hidden;
}
.sale_after{
	background: #fff;
}

.sale_after p{
	width: 100%;
	margin: 5% auto;
	text-align: center;
	background: #ccc;
	padding: 5em 1em;
	color: #000;
}

main a:link,main a:visited{
	color: inherit;
	text-decoration: none;
}
main *{box-sizing: border-box;}
main img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

main section{
	position: relative;
	isolation: isolate;
	text-align: justify;
}
[class^="item"] h2{
	margin-bottom: 8%;
}
[class^="item"] >*:not(.deco) {
	position: relative;
	z-index: 1;
}
[class^="item"] .deco [class^="d"] {
	position: absolute;
	z-index: 0;
}
[class^="item"] .deco .deco1{
	width: 13.86%;
	right: 0;
}
[class^="item"] .deco .deco2{
	width: 15.6%;
	left: 0;
}
[class^="item"] .deco .deco3{
	width: 10.4%;
	right: 0;
}

.ofr{
	background: #fff;
	padding-bottom: 6%;
}
.ofr .bt{
	display: block;
	position: relative;
	width: 94.66%;
	margin: 0 auto 5%;
	padding: .9em 0 .9em .7em;
	background: #FFA500;
	border-radius: .16em;
	box-shadow: 0px .2em #a05f1f;
	color: #fff;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
.ofr .bt::before{
	display: block;
	height: 1em;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10.0em;
	transform: rotate(30deg);
	margin: auto;
	content: '▼';
	font-size: .35em;
}
.ofr .bt:hover{
	opacity: .9;
	text-decoration:none;
}
.sale_before .bt{
	padding: .9em;
	background: #d2d2d2;
	box-shadow: 0px .2em #999;
}
.sale_before .bt::before{display: none;}
.sale_before .bt:hover{opacity: 1;}
.ofr .cmt{
	margin: 0 3%;
	padding-left: 1em;
	color: #666;
	font-size: .78em;
}
.ofr .cmt li{position: relative;}
.ofr .cmt li::before {
	content: "・";
	position: absolute;
	left: -1em;
	top: .10em;       /*← 縦位置を自由に調整できる */
	font-size: .9em;
}

/*---------------------------------------------------------- 共通 このページで追加分 */
.tx{
	font-weight: 500;
}
.cmt_small{
	font-size: 20px;
	text-indent: -1em;
	padding-left: 1em;
}
.ofr .cmt li{
	list-style: none;
}

@media(max-width: 749px){
	.cmt_small{
	font-size: 12px;
	}
}

/*---------------------------------------------------------- item01 */
.item01 .g1{
	position: relative;
}
.item01 .g1::before{
	content: "";
	position: absolute;
	width: 7%;
	height: 16%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 90%;
	top: 86%;
	transform: rotate(0deg);
}
.item01 .g1 .tx{
	width: 84%;
	margin: 0 auto;
}
.item01 .g1 .im{
	width: 84%;
	margin: 0 auto;
}
.item01 .g2{
	display: flex;
	justify-content: space-between;
}
.item01 .g2 .tx{
	width: 39%;
	margin: 0 0 0 8%;
}
.item01 .g2 .im{
	width: 46%;
}
.item01 .g3 .im{
	width: 84%;
	margin: 0 auto;
}
.item01 .g3 .tx{
	width: 84%;
	margin: 0 auto;
}
.item01 .g4{
	display: flex;
	justify-content: space-between;
}
.item01 .g4 .tx{
	width: 37%;
	margin: 0 0 0 8%;
}
.item01 .g4 .im{
	width: 43%;
	margin: 0 8% 0 0;
}
.item01 .g5{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.item01 .g5::before{
	content: "";
	position: absolute;
	width: 12%;
	height: 26%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 2%;
	top: 72%;
	transform: rotate(-70deg);
}
.item01 .g5 .im{
	width: 48%;
}
.item01 .g5 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item01 .g6 .im{
	width: 100%;
	margin: 0;
}
.item01 .ofr{
	position: relative;
}
.item01 .ofr::before{
	content: "";
	position: absolute;
	width: 12%;
	height: 41%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 82%;
	top: 92%;
	transform: rotate(0deg);
}

/*---------------------------------------------------------- item02 */
.item02 .g1{
	display: flex;
	justify-content: space-between;
}
.item02 .g1 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item02 .g1 .im{
	width: 50%;
}
.item02 .g2{
	display: flex;
	justify-content: space-between;
	position: relative;
}

.item02 .g2 .tx{
	width: 41%;
	margin: 0 0 0 8%;
}
.item02 .g2 .tx::before{
	content: "";
	position: absolute;
	width: 7%;
	height: 23%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 7%;
	top: 86%;
	transform: rotate(120deg);
}
.item02 .g2 .im{
	width: 50%;
}
.item02 .g3 .im{
	width: 94.6%;
	margin: 0 auto;
}
.item02 .g3 .tx{
	width: 84%;
	margin: 0 auto;
}
.item02 .g4{
	display: flex;
	justify-content: space-between;
}
.item02 .g4 .im{
	width: 47%;
}
.item02 .g4 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item02 .g5{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.item02 .g5::before{
	content: "";
	position: absolute;
	width: 9%;
	height: 26%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 82%;
	top: 85%;
	transform: rotate(200deg);
}
.item02 .g5 .tx{
	width: 40%;
	margin: 0 0 0 8%;
}
.item02 .g5 .im{
	width: 42%;
	margin: 0 8% 0 0;
}
.item02 .g6 .im{
	width: 67%;
	margin: 0 auto;
}
.item02 .ofr{
	position: relative;
}
.item02 .ofr::before{
	content: "";
	position: absolute;
	width: 9%;
	height: 26%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 5%;
	top: 82%;
	transform: rotate(190deg);
}

@media (max-width: 366px){
	.item02 .g2 .tx::before{
		width: 5%;
		height: 15%;
		top: 98%;
	}
}

/*---------------------------------------------------------- item03 */
.item03 .g1 .im{
	width: 84%;
	margin: 0 auto;
}
.item03 .g1 .tx{
	width: 84%;
	margin: 0 auto;
}
.item03 .g2{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.item03 .g2::before{
	content: "";
	position: absolute;
	width: 10%;
	height: 28%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 88%;
	top: 70%;
	transform: rotate(0deg);
}
.item03 .g2 .im{
	width: 45%;
	margin: 0 0 0 2.6%;
}
.item03 .g2 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item03 .g3{
	display: flex;
	justify-content: space-between;
}
.item03 .g3 .tx{
	width: 40%;
	margin: 0 0 0 8%;
}
.item03 .g3 .im{
	width: 45%;
	margin: 0 2.6% 0 0;
}
.item03 .ofr{
	position: relative;
}
.item03 .ofr::before{
	content: "";
	position: absolute;
	width: 9%;
	height: 14%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 4%;
	top: 100%;
	transform: rotate(30deg);
}

/*---------------------------------------------------------- item04 */
.item04 .g1{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.item04 .g1::before{
	content: "";
	position: absolute;
	width: 9%;
	height: 22%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 85%;
	top: 66%;
	transform: rotate(176deg);
}
.item04 .g1 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item04 .g1 .im{
	width: 50%;
}
.item04 .g2{
	display: flex;
	justify-content: space-between;
}
.item04 .g2 .tx{
	width: 40%;
	margin: 0 0 0 8%;
}
.item04 .g2 .im{
	width: 47%;
}
.item04 .g3 .im{
	width: 67%;
	margin: 0 auto;
}
.item04 .g3 .tx{
	width: 84%;
	margin: 15px auto 0;
}
.item04 .ofr{
	position: relative;
}
.item04 .ofr::before{
	content: "";
	position: absolute;
	width: 11%;
	height: 16%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 4%;
	top: 98%;
	transform: rotate(-74deg);
}

@media (max-width: 374px){
	.item04 .g1::before{
		top: 80%;
	}
}

@media (max-width: 348px){
	.item04 .g1::before{
		top: 88%;
	}
}

/*---------------------------------------------------------- item05 */
.item05 .g1 .im{
	width: 84%;
	margin: 0 auto;
}
.item05 .g2{
	display: flex;
	justify-content: space-between;
}
.item05 .g2 .tx{
	width: 40%;
	margin: 0 0 0 8%;
}
.item05 .g2 .im{
	width: 44%;
	margin: 0 2.6% 0 0;
}
.item05 .g3 .im{
	width: 100%;
	margin: 0 auto;
}
.item05 .g3 .tx{
	width: 84%;
	margin: 15px auto 0;
}
.item05 .ofr{
	position: relative;
}
.item05 .ofr::before{
	content: "";
	position: absolute;
	width: 9%;
	height: 12%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 88%;
	top: 98%;
	transform: rotate(-60deg);
}

/*---------------------------------------------------------- item06 */
.item06 .g1 .tx{
	width: 84%;
	margin: 15px auto 0;
}
.item06 .g2 .im{
	width: 85.2%;
	margin: 0 auto;
}
.item06 .g2 .tx{
	width: 84%;
	margin: 15px auto 0;
}
.item06 .g3{
	position: relative;
}
.item06 .g3::before{
	content: "";
	position: absolute;
	width: 12%;
	height: 21%;
	background-image: url("../../../img/genre/02002301/item_de001.png");
	background-size: contain;
	background-repeat: no-repeat;
	left: 7%;
	top: 82%;
	transform: rotate(0deg);
}
.item06 .g3_content{
	display: flex;
	justify-content: space-between;
}
.item06 .g3 .im{
	width: 45%;
	margin: 0 0 0 2.6%;
}
.item06 .g3 .tx{
	width: 40%;
	margin: 0 8% 0 0;
}
.item06 .g4 .im{
	width: 100%;
	margin: 0 auto;
}
.item06 .g4 .tx{
	width: 84%;
	margin: 15px auto 0;
}