@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap");
html            { width: 100%; height: 100% }
body   { 
width: 100%; height: 100%; 
font-family:"游明朝体", "Yu Mincho", YuMincho, 'Noto Serif JP', 'Hiragino Mincho ProN', "Helvetica Neue", serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; 
text-decoration: none; 
background: url(../image/bg_main_01.jpg) repeat; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow-x: hidden; url: text-align: center 
}
 
 
#vegas    { margin-top: 0px; width: 100%; height: 700px }

.hidden        { display: none; }
.main_visible          { }
.sp_visible        { display: none; }


.header                              { text-align: center; clear: both; position: absolute; z-index: 50; top: 180px; width: 100%; height: 290px }
.header_box                                 { text-align: center; clear: both; margin: 0px auto; position: relative; width: 1100px; height: 290px }
.header_box_01_1                              { text-align: center; margin: 0px auto;  padding-top: 30px; width: 600px; height: 80px }
.header_box_01_2                              { text-align: center; clear: both; margin: 0px auto; width: 600px; height: 140px }
.header_box_01_3                               { background: url(../image/bg_head_02.png) no-repeat center top; text-align: center; float: right; clear: both; position: absolute; right: 0px; top: 80px; width: 230px; height: 140px }
.header_box_01_4                                 { clear: both; margin-top: 80px; width: 230px }
.menu             { float: right; margin: 0px }
.image_box                                   { text-align: center; clear: both; position: relative; z-index: 20; top: 0px; width: 100%; height: 700px }
.image_shadow                         { background: url(../image/bg_top_02.png) repeat-x; z-index: 50; position: absolute; bottom: 0px; width: 100% }

@media screen and (max-width: 900px) {
	.header_box_01_3  {
		display: none;
	}
}

/*ヘッダーここまで*/










/*スクロールの際のフェードインアニメ*/
ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 100%;
	margin: 0 auto;
}
li{
	width: 100%;
	margin: 0px;
}
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 2.0s;
	transform: translateY(100px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


.main_01                               { text-align: center; float: left; clear: both; margin-top: 50px; position: relative; z-index: 30; width: 100% }
.main_01_box                              { text-align: center; margin: 50px auto 20px; position: relative; width: 100% }
.main_01_1                              { background: url(../image/icon/icon_line_01.png) no-repeat center bottom; text-align: center; margin: 0px auto 40px; padding-bottom: 20px; position: relative; width: 580px }
.main_01_2                            { text-align: center; margin: 0px auto 0px; position: relative; width: 100%; }
.main_01_link                              { background-color: #D67D27; text-align: center; margin: 0px auto 30px auto; padding: 30px 10px; width: 80%; max-width: 900px; display: block }
.main_01_link:hover                              { background-color: #FFB975; text-align: center; margin: 0px auto 30px auto; padding: 30px 10px; width: 80%; max-width: 900px; display: block }

.main_02                               { text-align: center; float: left; clear: both; margin-top: 20px; position: relative; z-index: 30; width: 100% }
.main_02_shadow_1                             { text-align: center; margin: 0px auto; position: relative; bottom: -10px; width: 100% }
.main_02_shadow_2                             { text-align: center; margin: 0px auto; position: relative; top: -10px; width: 100% }
.main_02_box                              { background-color: #fff; text-align: center; margin: 0px auto; padding-top: 20px; position: relative; z-index: 30; width: 100% }

.item_img_box                             {  }
.item_name_box                              { text-align: left; padding: 0px 15px; position: relative; width: 220px }


/* 商品表示レスポンシブ */

.item_list {
	width: 100%; 
	max-width: 1120px;
	display: flex;
	margin: 80px auto 0px;
	flex-wrap: wrap;
}
.item_list > div{
	width: 220px;
	margin-right: 30px; margin-left: 30px;
	margin-bottom: 80px;
	position: relative;
	text-align: left;
	overflow: hidden;
}

@media screen and (max-width: 1120px) {
	.item_list {
		width: 100%;
		max-width: 900px;
		display: flex;
		flex-wrap: wrap;
	}

	.item_list > div{
		width: 220px;
		margin-right: 40px; margin-left: 40px;
		margin-bottom: 80px;
		position: relative;
		text-align: left;
		overflow: hidden;
	}
}

@media screen and (max-width: 900px) {
	.item_list {
		width: 100%;
		max-width: 600px;
		display: flex;
		flex-wrap: wrap;
	}

	.item_list > div{
		width: 220px;
		margin-right: 40px; margin-left: 40px;
		margin-bottom: 80px;
		position: relative;
		text-align: left;
		overflow: hidden;
	}
}


.main_03                               { text-align: center; float: left; clear: both; margin-top: 0px; position: relative; width: 100% }
.main_03_box                              { text-align: center; margin: 0px auto 20px; position: relative; width: 100% }

.main_04_box                              { background-color: #fff; text-align: center; float: left; margin: 0px auto; padding-top: 20px; position: relative; z-index: 30; width: 100% }
.main_04_1                              { background: url(../image/icon/icon_line_01.png) no-repeat center bottom; text-align: center; margin: 0px auto 10px; padding-bottom: 20px; position: relative; width: 580px }
.main_04_2                                { text-align: center; margin: 50px auto 0px; position: relative; width: 100%; max-width: 1120px }
.main_04_2_left        { text-align: left; clear: both; margin: 0px auto 120px auto; padding: 0px 20px; position: relative; width: 100%; max-width: 600px; min-width: 450px }
.main_04_2_right        { text-align: left; clear: both; margin: 0px auto 120px auto; padding: 0px 20px; position: relative; width: 100%; max-width: 600px; min-width: 450px }
.main_04_3                        { color: #3a3a3a; font-size: 24px; line-height: 30px; margin-bottom: 20px }
.main_04_4                         { color: #3a3a3a; font-size: 14px; line-height: 24px; margin-bottom: 20px }


/*メイン部分ここまで*/










.footer                              { background-color: #e8e8e8; text-align: center; float: left; clear: both; padding-top: 40px; padding-bottom: 40px; position: relative; width: 100% }
.footer_image                     { background: url(../image/pict/pic_foot_01.jpg) no-repeat; text-align: center; clear: both; position: relative; z-index: 10; top: 100px; width: 100%; height: 400px; visibility: visible; background-size: cover ; cover: -moz-background-size: cover  }
.foot_shadow_img { width: 100%; }
.footer_shadow_1                        { position: absolute; top: 0px; width: 100%; z-index: 7; }
.footer_shadow_2                          { background: url(../image/icon/icon_shadow_01.png) repeat; position: absolute; z-index: 5; top: 0px; width: 100%; height: 400px }
.foot_box_1                  { text-align: center; margin: 0 auto; width: 100%; }
.sns_box                               { text-align: right; padding-right: 20px; position: fixed; z-index: 100; right: 0px; bottom: 30px; width: 80px; }



.bg_contents_01                { width: 1000px; height: 560px }



/* サイズ関係 */

.img_size_00                              { }
.img_size_01                              { width: 100%; height: auto; }
.img_size_02                              { width: 200px; height: 200px; }

.table_width_01                { width: 100%; border:1px solid #d7d7d7; border-collapse:collapse; max-width: 800px; }
.table_width_101                { width: 100%; border:1px solid #B8B8B8; border-collapse:collapse; }

.td_width_01                   { background-color: #f5f5f5; padding: 15px 15px 10px; border: solid 1px #d7d7d7; width: 250px; border-collapse: collapse  }
.td_width_02                   { padding: 15px 15px 10px; border: solid 1px #d7d7d7; border-collapse: collapse  }
.td_width_101                   { background-color: #E7E7E7; padding: 5px 10px; border: solid 1px #B8B8B8; width: 50%; border-collapse: collapse  }
.td_width_102                   { background-color: #E7E7E7; padding: 5px 10px; border: solid 1px #B8B8B8; width: 50%; border-collapse: collapse  }
.td_width_103                   { background-color: #F3F3F3; padding: 5px 10px; border: solid 1px #B8B8B8; width: 50%; border-collapse: collapse  }
.td_width_104                   { padding: 5px 10px; border: solid 1px #B8B8B8; width: 50%; border-collapse: collapse  }
.osusume_td_01                  { text-align: left; float: left; margin-right: 35px; margin-left: 35px; width: 220px }




.list-item::after{
   content: '';
        display:block;
        width:0;
        margin: 2px auto 0;
        border-bottom: 1px solid  #CF1653;
        transition: width 0.3s ease-in-out;
}

.list-item:hover::after{
  width: 100%;
}