@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;}
.pc {display:block;}
.sp {display:none;}
.Red {color: #FF0004;}
.clear {clear:both;}
#lf_wrap a{color: #000; text-decoration: none; text-align: center;}
.bold{font-size: 120%; font-weight: bold; margin-bottom: 5px;}
.red{color: #CC0D10; font-weight: bold;}
a img:hover{opacity: 0.8;}

#lf_wrap {
	clear: both;
	width:100%;
	max-width: 1200px;
	padding: 5% 0 ;
	margin:0 auto 1%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;	
	/*background-color: #e9e9e9;*/
}

.main {width: 45%; margin:0 auto 5%;}

.Lead_pc {
	width: 100%;
	margin: 0 auto 5%;
	display: block;
	text-align:center;
	font-size:22px;
	padding:0 ;
	line-height:2em;
}

.Lead_sp {display: none;}

/*item-----------------------*/
.index_box{ width: 70%; margin: 3% auto 5%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.index1{ width: 30%; margin: 0; }
/*.sub_ttl{width: 42%; margin: 0 auto 2%;}*/
/*.item_wrapper{ width: 90%; margin: 3% auto 5%; display:flex; flex-wrap:wrap; justify-content: space-between;}*/
.item_wrap{ width: 75%; margin: 15% auto 0 ; }
.subttl{ width:60%; margin: 0 auto ; }
.staff_box{ width: 60%; margin: 10% auto 15%; display:flex; flex-wrap:wrap; justify-content: space-between;}
.staff1{ width: 28%; margin: 0; }
.staff_n{font-size: 17px; font-weight: 600; text-align: center;}

.sns_box{ width: 90%;	margin: 5% auto 0;	display:flex;	flex-wrap:wrap;	justify-content: space-between;}
.sns1{	width: 48%;	margin: 0;	box-sizing: border-box;}

h3{margin: 20% auto 2%; font-size: 18px; font-weight: 600; text-align: center;}


.item_main{ width:60%; margin: 0 auto 15% ; }

.item_box{width: 100%; margin: 0 auto 10%; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center;}
.item1_1{width: 50%;  margin: 0;}
.item1_2{width: 45%;  margin: 0;}

.item_box:nth-child(2n+1) { flex-direction: row; } 
.item_box:nth-child(2n  ) { flex-direction: row-reverse; } 


.foot_box{ width: 100%; margin: 15% auto 0; display:flex; flex-wrap:wrap; justify-content: space-between;}
.foot1{ width: 33.333334%; margin: 0; }


.item_n{
	width: 100%;
	margin: 0 auto 2%;
	font-size: 22px;
	letter-spacing: 1px;
	line-height: 1.6em;
	font-weight: bold;
	text-align: center;
}
.cmt{
	width: 100%;
	margin: 0 auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.7em;
	font-weight: 400;
}

.cmt3{margin: 5% auto 2%; font-size: 18px; font-weight: 600; text-align: center;}

.cmt2{
	width: 40%;
	margin: 2% auto 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.7em;
	font-weight: 400;
}

.txt_R{text-align: right;}

.table-container {
            overflow-x: auto; /* 小さい画面で横スクロールを可能にする */
            max-width: 100%;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* テーブルのスタイル */
        .sales-table {
            width: 40%;
			margin: 0 auto;
            border-collapse: collapse;
            table-layout: fixed; /* テーブル幅の固定 */
            min-width: 400px; /* 最小幅を設定し、小さい画面での表示崩れを防ぐ */
        }


        /* ヘッダーセルのスタイル */
        .sales-table th {
            padding: 15px 10px;
            text-align: center;
            font-weight: bold;
            font-size: 1.1em;
            color: #fff;
            border: 1px solid #ddd;
            white-space: nowrap; /* テキストの折り返しを防ぐ */
        }

        /* 奇数行のスタイル（アクセシビリティのため） */
        .sales-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
        
        /* データセルのスタイル */
        .sales-table td {
            padding: 12px 10px;
            text-align: center;
            border: 1px solid #ddd;
            font-size:16px;
        }

        /* 店名列のスタイル */
        .store-name-col {
           width: 60%;
            color: #333;
        }

        /* 販売日列のスタイル */
        .sales-date-col {
           width: 40%;
            color: #333;
        }

        /* ヘッダーセルの背景色のオーバーライド */
        .sales-table thead th:first-child {
            background-color: #e38a8a; /* 店名のヘッダー背景色 */
        }

        .sales-table thead th:last-child {
            background-color: #ffaa00; /* 販売日のヘッダー背景色 */
        }



/* General button style (reset) */
.btn {
	border: none;
	font-family: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	display: inline-block;
	letter-spacing: 1px;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	/*margin: 2% auto 8%;*/
	text-transform: uppercase;
	margin-top: auto;
}


/* Button 1 */
.btn-1 {
	width: 60%;
    color: #fff;
    text-align: center;
    margin: 9% auto 0;
    display: block;
    padding: 15px 0px;
    font-size: 16px;
	letter-spacing: 5px;
	font-weight: 700;
  /*  background-color: #000;*/
}
.btn-2 {
	width: 50%;
    color: #fff;
    text-align: center;
    margin: 0 auto ;
    display: block;
    padding: 14px 0px;
    font-size: 16px;
	letter-spacing: 1px;
	font-weight: 700;
}

.btn:hover {
	color: #000;
	background-color: #aaa;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}


.bg_p{background-color: #ffa4a9;}
.bg_y{background-color: #ffc33a;}
.bg_g{background-color: #95d087;}

/*.point_video {display: block; width: 40%; margin: 0 auto 10%;}
.point_video iframe {width: 100%;}
*/

/* スライダ―のCSS */
	.slider {    width: 100%;    display: flex;    gap: 10px;    overflow-x: auto;}
	.slide {width: 300px;}
	.slide img { width: 280px; max-width: inherit;}

@media only screen and (max-width: 450px) {
	#lf_wrap {width: 100%; padding: 5% 0 2%;}
	.main {width: 100%; margin:0 auto 5%;}
	.sp {display:block;}
	.pc{display: none;}
	
	.Lead_pc {display: none;}

	.Lead_sp {
		width: 100%;
		display: block;
		text-align:center;
		font-size:14px;
		margin:0 auto 10%;
		line-height:1.7em;
	}
	
/*item-------------------------------------*/
	.index_box{ width: 96%; margin: 3% auto 5%; display:flex; flex-wrap:wrap; justify-content: space-between;}
	/*.item_wrapper{ width: 95%; margin: 3% auto 5%; display: block;}*/
	.item_wrap{ width:96%; margin: 20% auto 0;}
	.subttl{ width:90%; margin: 0 auto ; }
	.staff_box{ width: 90%; margin: 10% auto 15%; }
	.staff1{ width: 30%; margin: 0; }
	.staff_n{font-size: 17px; font-weight: 600; text-align: center;}

	h3{margin: 25% auto 2%; font-size: 16px; font-weight: 600; text-align: center;}
	.item_main{ width:90%; margin: 0 auto 15% ; }
	
	.item_box{ width: 100%; margin:0 auto 15%; display: block;}
	.item1_1{width: 90%;  margin: 0 auto 5%;}
	.item1_2{width: 100%;  margin: 5% auto 0;}
	
	.item_n{font-size: 20px;}
	/*.sml{font-size: 12px;}
	.sml2{font-size: 11px;}
	.item_p{font-size: 16px;}*/
	.cmt{width: 100%; margin: 0 auto 0; font-size: 12px;}
	
	.cmt3{margin: 5% auto 2%; font-size: 16px; font-weight: 600; text-align: center;}
	
	.txt_R{text-align: left;}
	
	.cmt2{
		width: 75%;
		min-width: 330px; 
		margin: 2% auto 0;
		text-align: left;
		font-size: 12px;
		line-height: 1.7em;
		font-weight: 400;
	}
	
	.slide img { width: 230px;}

	.sales-table {
		width: 75%;
		margin: 0 auto;
		border-collapse: collapse;
		table-layout: fixed; /* テーブル幅の固定 */
		min-width: 330px; 
	}
	
	.sales-table td { font-size:13px;  }
/* Button 1 */
	.btn-1 {
		width: 80%;
		margin: 7% auto 0 ;
		padding: 8px 0px;
		font-size: 12px;
		letter-spacing: 3px;
	}
	.btn-2 {
		width: 60%;
		margin: 0 auto ;
		padding: 8px 0px;
		font-size: 14px;
		letter-spacing: 3px;
	}
	
	/*.point_video {display: block; width: 80%; margin: 0 auto 20%;}*/


}