@charset "utf-8";

/* =============================================
 COMMON
============================================= */
body{
	background: #fff;
}

/* common.css調整 */
@media print, screen and (min-width:641px) {
	body {
		font-size: 1em;
	}
}


/* ---------------------------------------------------------------------------
 * header
--------------------------------------------------------------------------- */

.header_main{
    width: 90%;
    margin: min(8vw, 50px) auto;
	display: flex;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * main
--------------------------------------------------------------------------- */
.mainArea {
	width: 90%;
	max-width: 1000px;
	margin: min(8vw, 50px) 0;
	margin: 0 auto;
	line-height: 1.5;
}

/*	goods_list
------------------------------------ */

.goods_list{
	margin-bottom: min(8vw, 50px);
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 4vw 4%;
	font-size: 0.875em;
}

.goods_list li{
	width: calc((100% - 4%) / 2);
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
	box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.goods_img{
    height: 100%;
}
.goods_txt{
    height: 100%;
	padding: 0.75em;
	background-color: #F8F8F8;
	text-align: center;
	line-height: 1.2;
}
.goods_txt dt{
	margin-bottom: 0.25em;
	font-weight: bold;
}
.goods_txt dt span{
	display: inline-block;
}
.goods_txt dd{
	font-size: 0.875em;
}
.goods_txt dd p + p{
	margin-top: 0.25em;
}
.goods_txt dd .price{
	margin-right: 0.25em;
	font-size: 1.125em;
	font-weight: bold;
}
@media screen and (min-width:641px) {
	.goods_list{
		gap: 30px 2%;
	}
	.goods_list li{
		width: calc((100% - (2 * 2%)) / 3);
	}
}
@media screen and (min-width:1001px) {
	.goods_list{
		font-size: 1em;
	}
}


/*	goods_box
------------------------------------ */
.goods_box{
	
	margin-bottom: min(8vw, 50px);
	background: #f8f8f8;
    border-radius: 5px;
	overflow: hidden;
}

.goods_box_inner{
	padding: min(5vw, 30px);
}

.goods_box a{
	display: inline-block;
	text-decoration: underline;	
	text-indent: 0;
	word-break: break-all;
}

.goods_box h2{
	padding: 0.5em 0.75em;
	background: url(../../img/2024/common/bg_ttl.png) 0 0 repeat #e60013;
	color: #fff;
	font-size: clamp(1.25em, 3.12vw, 1.5em);
	font-weight: bold;
}
.goods_box h2:first-child,
.goods_box h3:first-child,
.goods_box h4:first-child{
	margin-top: 0;
}
.goods_box h3{
	padding-bottom: 0.25em;
    margin: 1.5em 0 0.75em;
	border-bottom: 2px solid #ccc;
	color: #f40009;
	font-size: clamp(1.125em, 2.81vw, 1.25em);
	font-weight: bold;
}
.goods_box h4{
	margin: 1.5em 0 0.5em;
	font-size: clamp(1em, 2.5vw, 1.125em);
	font-weight: bold;
}

.goods_box ul+ ul{
	margin-top: 1em;
}

.goods_box li{
	margin-bottom: 0.5em;
	line-height: 1.3;
}
.goods_box li:last-child{
	margin-bottom: 0;
}
.goods_box .ti li{
	padding-left: 1em;
	text-indent: -1em;
}

/* ---------------------------------------------------------------------------
 * 汎用
--------------------------------------------------------------------------- */
/* テキスト
------------------------------------ */
.fs_xs {
	font-size: 0.75em;
}
.fs_s {
	font-size: 0.875em;
}
.fs_l {
	font-size: 1.25em;
}
.fs_xl {
	font-size: 1.5em;
}
.fs_inherit{
	font-size: inherit;
}
.fw_normal {
	font-weight: normal;
}
.fw_bold {
	font-weight: bold;
}
.ti-05 {
	text-indent: -0.5em;
}
.ls01 {
	letter-spacing: 0.1em;
}
.ls-005 {
	letter-spacing: -0.05em;
}
.ls-01 {
	letter-spacing: -0.1em;
}
.ls-02 {
	letter-spacing: -0.2em;
}
.ls-03 {
	letter-spacing: -0.3em;
}
.ta_left {
	text-align: left;
}
.ta_center {
	text-align: center;
}
.brackets,
.week{
	margin: 0 -0.5em;
	display: inline-block;
	font-size: 0.875em;
}
/* レイアウト
------------------------------------ */
.mt0 {
	margin-top: 0 !important;
}
.mt15 {
	margin-top: 15px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb15 {
	margin-bottom: 15px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mt_1em {
	margin-top: 1em !important;
}
.mb_1em {
	margin-bottom: 1em !important;
}