@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: #aa0d0d;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-attachment: fixed;
	background-color: #ffd5a9;
	background-image: linear-gradient(#f5a17d,#ffd5a9 65%);
}
@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;
}

/*---------------------------------------------------------- item01 */
.item01 .g1{
	display: flex;
	justify-content: space-between;
}
.item01 .g1 .tx{
	width: 42%;
	margin-inline: 8% -17.2%;
}
.item01 .g1 .im{
	width: 59.2%;
}
.item01 .g2{
	position: relative;
	margin-bottom: 12%;
}
.item01 .g2 .tx{
	position: absolute;
	top: 8%;
	right: 8%;
	width: 42%;
}
.item01 .g3{
	margin-bottom: 8%;
}
.item01 .g3 .im{
	margin-bottom: 4%;
}
.item01 .g3 .tx{
	margin-inline: 8%;
}
.item01 .g4{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item01 .g4 .tx{
	width: 42%;
	margin-left: 8%;
}
.item01 .g4 .im{
	width: 38%;
	margin-right: 4%;
}
.item01 .g5 .im{
	margin-bottom: 4%;
}
.item01 .deco .d1{
	top: 19.5%;
}
.item01 .deco .d2{
	top: 28.5%;
}
@container (max-width: 340px) {
	.item01 .deco .d1{
		top: 18%;
	}
	.item01 .deco .d2{
		top: 39.5%;
	}
}

/*---------------------------------------------------------- item02 */
.item02 .g1{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item02 .g1 .tx{
	width: 42%;
	margin-left: 8%;
}
.item02 .g1 .im{
	width: 38%;
	margin-right: 4%;
}
.item02 .g2{
	margin-bottom: 8%;
}
.item02 .g2 .im{
	margin-bottom: 4%;
}
.item02 .g2 .tx{
	margin-inline: 8%;
}
.item02 .g3{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item02 .g3 .im{
	width: 46.13%;
}
.item02 .g3 .tx{
	width: 42%;
	margin-right: 8%;
}
.item02 .g4{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item02 .g4 .tx{
	width: 42%;
	margin-left: 8%;
}
.item02 .g4 .im{
	width: 42%;
}
.item02 .g5{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item02 .g5 .im{
	width: 42%;
}
.item02 .g5 .tx{
	width: 42%;
	margin-right: 8%;
}
.item02 .deco .d1{
	top: 49.5%;
}

/*---------------------------------------------------------- item03 */
.item03 .g1{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item03 .g1 .im{
	width: 38%;
	margin-left: 4%;
}
.item03 .g1 .tx{
	width: 42%;
	margin-right: 8%;
}
.item03 .g2{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item03 .g2 .tx{
	width: 42%;
	margin-left: 8%;
}
.item03 .g2 .im{
	width: 42%;
}
.item03 .g3{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item03 .g3 .im{
	width: 46.13%;
}
.item03 .g3 .tx{
	width: 42%;
	margin-right: 8%;
}
.item03 .g4{
	margin-bottom: 8%;
}
.item03 .g4 .tx{
	margin: auto 8% 4%;
}
.item03 .g4 .im{
	margin-inline: 8%;
}
.item03 .g5{
	display: flex;
	justify-content: space-between;
	margin-bottom: 4%;
}
.item03 .g5 .im{
	width: 46%;
}
.item03 .g5 .tx{
	width: 42%;
	margin-right: 8%;
}
.item03 .deco .d1{
	top: 23.5%;
}
.item03 .deco .d2{
	top: 45%;
}
.item03 .deco .d3{
	bottom: 42.5%;
}
.item03 .deco .d4{
	bottom: 25%;
}
.item03 .deco .d5{
	bottom: 16.5%;
}
@container (max-width: 340px) {
	.item03 .deco .d1{
		top: 34.5%;
	}
	.item03 .deco .d2{
		top: 33%;
	}
	.item03 .deco .d3{
		bottom: 51.5%;
	}
	.item03 .deco .d4{
		bottom: 41%;
	}
	.item03 .deco .d5{
		bottom: 14.5%;
	}
}

/*---------------------------------------------------------- item04 */
.item04 .g1{
	margin-bottom: 8%;
}
.item04 .g1 .im{
	margin: auto 6.66% 4%;
}
.item04 .g1 .tx{
	margin-inline: 8%;
}
.item04 .g2{
	margin-bottom: 8%;
}
.item04 .g2 .im{
	margin: auto 6.66% 4%;
}
.item04 .g2 .tx{
	margin-inline: 8%;
}
.item04 .g3{
	display: flex;
	justify-content: space-between;
	margin-bottom: 4%;
}
.item04 .g3 .im{
	width: 27%;
	margin-left: 4%;
}
.item04 .g3 .tx{
	width: 57%;
	margin-right: 8%;
}
.item04 .g4{
	display: flex;
	justify-content: space-between;
	margin-bottom: 4%;
}
.item04 .g4 .tx{
	width: 55%;
	margin-left: 8%;
}
.item04 .g4 .im{
	width: 28.93%;
	margin-right: 4%;
}
.item04 .deco .d1{
	top: 25%;
}
.item04 .deco .d2{
	top: 45%;
}
.item04 .deco .d3{
	bottom: 24.5%;
}

/*---------------------------------------------------------- item05 */
.item05 .g1{
	margin-bottom: 8%;
}
.item05 .g1 .tx{
	margin-inline: 8%;
}
.item05 .g2{
	position: relative;
	margin-bottom: 12%;
}
@container (max-width: 358px) {
	.item05 .g2{
		margin-bottom: 23%;
	}
}
@container (max-width: 322px) {
	.item05 .g2{
		margin-bottom: 34%;
	}
}
.item05 .g2 .tx{
	position: absolute;
	top: 14.5%;
	right: 8%;
	width: 42%;
}
.item05 .g3{
	position: relative;
	margin-bottom: 14%;
}
@container (max-width: 358px) {
	.item05 .g3{
		margin-bottom: 25%;
	}
}
@container (max-width: 322px) {
	.item05 .g3{
		margin-bottom: 29%;
	}
}
.item05 .g3 .tx{
	position: absolute;
	top: 17%;
	left: 8%;
	width: 42%;
}
.item05 .g4{
	display: flex;
	justify-content: space-between;
	margin-bottom: 8%;
}
.item05 .g4 .im{
	width: 42%;
	margin-left: 4%;
}
.item05 .g4 .tx{
	width: 42%;
	margin-right: 8%;
}
.item05 .g5{
	margin-bottom: 4%;
}
.item05 .g5 .im{
	margin: auto 6.66% 4%;
}
.item05 .g5 .tx{
	margin-inline: 8%;
}
.item05 .deco .d1{
	top: 46%;
}
.item05 .deco .d2{
	bottom: 37%;
}
.item05 .deco .d3{
	bottom: 31.5%;
}
@container (max-width: 340px) {
	.item05 .deco .d1{
		top: 47.5%;
	}
	.item05 .deco .d2{
		bottom: 35.5%;
	}
	.item05 .deco .d3{
		bottom: 28.5%;
	}
}