html{
/*scroll-behavior: smooth;
scroll-padding-top: 600px;*/
}

body{
background-color: #000;
line-height: 1.8;
font-family: "Zen Old Mincho", serif;
font-weight: normal;
font-style: normal;
color: #fff;
}

p{
margin:  10px 0;
font-size: 1em;
}

.pc{display:block;}
.sp{display:none;}
.ssp{display:none;}

img {
max-width:100%;
vertical-align: bottom;
}

ul li{
line-height: 1.8;
}

ul.br{
margin-left: 1.4em;
text-indent: -1.4em;
}

small{font-size: 0.6;}

a{
color: #fff;
text-decoration: underline;
word-break: break-all;
}

a:hover{
text-decoration: none;
}

a img{
transition:0.5s;
}

a img:hover{
opacity: 0.5 ;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fadein_c {
opacity : 0;
transform : translate(0, 0);
transition : all 1500ms;
}
.fadein_c.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein{
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}

.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

/* 　コンテンツスタイル　 */

#contents{
width: 1200px;
margin: 0 auto;
background-color: #000;
line-height: normal;
color: #fff;
}

.contents_inner{
width: 1200px;
margin: 0 auto;
}

.dli-external-link {
display: inline-block;
color: #fff;
line-height: 1;
width: 0.7em;
height: 0.7em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: none;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link > span {
position: absolute;
top: -0.24em;
right: -0.3em;
width: 45%;
height: 45%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: none;
box-shadow: -0.1em 0.1em 0 0.1em none;
box-sizing: border-box;
}

.dli-external-link > span::before {
content: '';
position: absolute;
top: 0.06em;
right: 0.05em;
width: 0.05em;
height: 0.6em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.dli-external-link-event {
display: inline-block;
vertical-align: middle;
color: #fff;
line-height: 1;
width: 0.5em;
height: 0.5em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: #2722da;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link-event > span {
position: absolute;
top: -0.1em;
right: -0.1em;
width: 40%;
height: 40%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: #2722da;
box-shadow: -0.1em 0.1em 0 0.1em #2722da;
box-sizing: border-box;
}

.dli-external-link-event > span::before {
content: '';
position: absolute;
top: -0.05em;
right: -0.1em;
width: 0.1em;
height: 0.5em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.mb{
margin-bottom: 50px;	
}

.center{
text-align: center;	
}

h2{
text-align: center;
}

h2 img{
width: 69%;
}

/* main_area */

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background: url(../images/img_main_pc_02.jpg) 0 no-repeat #000;
background-size: contain;
position:relative;
padding-top: 78.125%;
width:100%;
margin-top: 0;
margin-bottom: 100px;
border-bottom: solid 1px #fff;
}

.main_area_inner{
position:absolute;
top: 0px;
width:100%;
}

.icon_red{
background-color: red;
padding: 0 5px;
margin-right: 3px;
}

.icon_blue{
background-color: #2d23ff;
padding: 0 5px;
margin-right: 3px;
}

.icon_online{
font-size: 0.6em;
background-color: #008733;
padding: 2px 5px;
margin-right: 3px;
}

.icon_venue{
font-size: 0.6em;
background-color: #AA07AA;
padding: 2px 5px;
margin-right: 3px;
}

.icon_25th{
font-size: 0.6em;
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
padding: 2px 5px;
color: #000;
font-weight: bold;
margin-right: 3px;
}

/* area_01 */

.area_01,.area_02,.area_03,.area_04,.area_05,.area_06,.area_07 {
width: 1000px;
margin: 100px auto;
margin-top: -100px;
padding-top: 100px;
}

/* area_02 */

.area_02 table{
width: 100%;
border: solid 1px #fff;
margin-bottom: 50px;
}

.area_02 table th{
width: 30%;
color: #000;
background-color: #fff;
border-bottom: solid 1px #000;
padding: 10px;
}

.area_02 table th.last{
border-bottom: solid 1px #fff;
}

.area_02 table td{
width: 70%;
border-bottom: solid 1px #fff;
padding: 15px 20px;
}

ul.maker {
list-style: none;
padding: 0;
margin: 0;
}

ul.maker li {
float: left;
width: 18%;
margin-right: 2.5%;
margin-bottom: 2.5%;
}

ul.maker li:nth-child(5n) {
margin-right: 0;
}

ul.red li {
outline: solid 3px red;
outline-offset: -3px;
}

ul.blue li {
outline: solid 3px #2d23ff;
outline-offset: -3px;
}

h4.side_a{
background-color: red;
padding: 0px 20px;
}

h4.side_b{
background-color: #2d23ff;
padding: 0px 20px;
}

.p_name{
line-height: 1.2em
}

ul.sales_list{
padding: 0;
list-style: none;
margin: 0;	
}

ul.sales_list li.item_box{
float: left;
width: 30%;
margin-bottom:5%;
margin-right: 5%;
outline: solid 1px #fff;
outline-offset: 1px;
}

ul.sales_list li.item_box:nth-child(3n) {
margin-right: 0;
}

ul.sales_list li.item_box .sales_item{
border-bottom: solid 1px ;
position:relative;
}

.sales_list li .sales_item .event-img-icon {
position:absolute;
padding: 5px 4px; 
right:0px;
bottom:0px;
}

.sales_list liv.sales_item .event-img-icon img.zoom-icon{
outline: none;
}

ul.sales_list .product_detail{
padding: 10px ;
}

.sales_notice{
border: double 5px #FFED00;
padding: 10px 20px;
margin: 30px 0;
}

ul.notice{
padding-left: 0;
margin: 0;
}

ul.notice li{
list-style: none;
font-size: 0.8em;
}

a.grad_btn{
/*ボタンの形状*/
display: inline-block;
color:#fff;
padding: 4% 20%;
margin-top: 15px;
text-align: center;
width: 60%;
border-radius:30px;
text-decoration: none;
outline: none;
/*背景の色と形状*/
background: linear-gradient(270deg, #3204fe 0%, #9a50a3 51%, #ff0017 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
}

a.grad_btn_02{
/*ボタンの形状*/
display: inline-block;
color:#fff;
padding: 2% 10%;
margin-top: 15px;
text-align: center;
width: 40%;
border-radius:60px;
text-decoration: none;
outline: none;
/*背景の色と形状*/
background: linear-gradient(270deg, #3204fe 0%, #9a50a3 51%, #ff0017 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
margin-bottom: 50px;
}

/*hoverした際の、背景の場所とテキスト色の変更*/
a.grad_btn:hover {
color: #fff;
background-position: 99% 50%;
}

a.grad_btn_02:hover {
color: #fff;
background-position: 99% 50%;
}

.area_05 p img{
outline: 1px solid #fff;
outline-offset: -1px;
margin: 50px 0;
}

.area_06 p img{
outline: 1px solid #fff;
outline-offset: -1px;
text-align: center;
margin: 30px 0 15px;
}

.area_06 p{
text-align: center;
}

/* sns_media */

.sns_media h2 img{
text-align: center;
width: 25%;
margin-bottom: 30px;
}

.sns_media{
width: 1200px;
margin: 100px auto;
}

.sns_media ul{
padding: 0;
margin: 0;
}

.sns_media ul li{
width: 30%;
float: left;
margin-right:5%; 
list-style: none;
}

.sns_media ul li:last-child{
margin-right: 0;
}

/* footer */

footer{
border-top: solid 1px #fff;
padding: 30px 0;
background-color: #000;
}

.footer_inner{
width: 1200px;
margin: 0 auto;
position: relative;
}

.sns_icon{
position: absolute;
right: 0;
margin: 0;
}

.sns_icon li{
list-style: none;
float: left;
margin-top: 15px;
margin-left: 10px;
}


.slider{
border: solid 1px;
outline-offset: -1px;
box-shadow: 0 0 20px 5px rgba(127, 255, 166, 0.3);
}

ul.list_notice{
padding: 0;
list-style: none;
font-size: 0.9em;
}

ul.list_notice li{
text-indent: -0.9em;
padding-left: 0.9em;	
}

.other{
font-size: 1.3em;
font-weight: bold;
text-align: center;
margin: 50px 0;
}

h5 {
padding: 0.2rem 1rem 0.2rem 1.5rem;
margin-bottom: 0.2rem;
background-image: linear-gradient(to top, #ff0000 0%, #001eff 100%);
background-repeat: no-repeat;
background-size: 0.3rem 100%;
font-weight: bold;
}

/*PAGETOP */

#pagetop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer;
}

#pagetop img {
opacity: .4;
filter: alpha(opacity=40)
}

#pagetop img:hover {
opacity: 1;
filter: alpha(opacity=100)
}

#pagetop {
display: none;
}

/*1200*/

@media screen and (max-width: 1200px) {

.footer_inner{
width: 94%;
margin: 0 3%;
}

.sns_icon li img{
width: 100%;
}

.threezero_icon{
width: 100%;
}

/* sns_media */

.sns_media h2 img{
width: 25%;
}

.sns_media{
width: 94%;
margin: 50px auto;
}

/* area_01 */

.area_01,.area_02,.area_03,.area_04,.area_05,.area_06,.area_07 {
width: 94%;
margin: 50px 3% 100px;
padding-top: 0;
}
}

/*950*/

@media screen and (max-width: 950px) {

.main_area{
margin-top: 56px;
}

a.grad_btn{
font-size: 0.8em;
}

}

/*SP*/

@media screen and (max-width: 768px) {

body{
font-size: 0.8em;
}

.pc{display:none;}
.sp{display:block;}

.main_area{
padding-top: 156.25%;
background: url(../images/img_main_sp_02.jpg) 0 no-repeat #000;
background-size: contain;
position:relative;
margin-bottom: 0;
}

h2 img{
width: 100%;
}

ul.maker li {
float: left;
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
}

ul.maker li:nth-child(5n) {
margin-right: 2%;
}

ul.maker li:nth-child(3n) {
margin-right: 0;
}

/* sns_media */

.sns_media h2 img{
width: 50%;
}

.sns_media ul li{
width: 100%;
float: none;
margin-right:0%; 
margin-bottom: 20px;
text-align: center;
}

.sns_media ul li:last-child{
margin-right: 0;
}

ul.sales_list li.item_box{
width: 48%;
margin-bottom:4%;
margin-right: 4%;
}

ul.sales_list li.item_box:nth-child(3n) {
margin-right: 4%;
}

ul.sales_list li.item_box:nth-child(2n) {
margin-right: 0;
}

#pagetop {
width: 70px;
}

a img{
transition:none;
}

a img:hover{
opacity: 100%;
}
	
a.grad_btn_02{
/*ボタンの形状*/
display: inline-block;
color:#fff;
padding: 4% 15%;
margin-top: 15px;
text-align: center;
width: 70%;
border-radius:60px;
text-decoration: none;
outline: none;
/*背景の色と形状*/
background: linear-gradient(270deg, #3204fe 0%, #9a50a3 51%, #ff0017 100%);
background-position: 1% 50%;
background-size: 200% auto;
/*アニメーションの指定*/
transition: all 0.3s ease-out;
margin-bottom: 50px;
}
	
}

@media screen and (max-width: 500px) {

.ssp{display:block;}

}