@charset "utf-8";
/* CSS Document */

body{

}


/*ヘッダー画像表示　2023以前*/
#header{
position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
width: 100%;
height:55vh;/*70*/
overflow: hidden;/*はみ出しているところを隠す*/
}
#header-img{
position: fixed;/*背景を固定するためfixedをかける*/
z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
top: 0;/*topの位置がJSで変化*/
/*以下画面で背景画像を表示させるための指定*/
width: 100%;
height:80vh;/*80*/
background: url("../img/main_bg_winter_spring.jpg") no-repeat center;/*背景画像の設定※オリジナルの画像に設定してください*/
background-size:cover;
transform-origin:center;/*変化する基点を中心からに設定*/
}

/*ヘッダー画像表示　2024～*/
#header2025{
width: 100%;
margin: auto;
}
#header2025 img{
width: 100%;
}

.container
{
background: #fff;
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}



/*ロゴを中央に配置*/
#header h1{
	position: absolute;
	top:45%;
	left: 27%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}


@media only screen and (max-width: 1075px) {
#header h1{
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}
}
@media only screen and (max-width: 640px) {
#header{
height:40vh;/*70*/
}
#header h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}
}
#header h1 img.logo{
max-width: 300px;
width: 100%;
}


/*リード文言*/
.read_pc{
	position: relative;
	top: 40px;
}
.read_sp {
padding: 0px 0 20px;
text-align: center;
}
.read_sp img{
max-width: 300px;
width: 80%;
}
.read_pc img{
max-width: 300px;
width: 100%;
}

/*ロゴの切り替え*/
@media only screen and (max-width: 999px) {/*915*/
.read_pc{
display: none;
}
.read_sp{
display: block;
}
}
@media only screen and (min-width: 999px) {/*915*/
.read_pc{
display: block;
}
.read_sp{
display: none;
}
}



.header_mark{
	position: fixed;
	top:13%;
	/*top: 10px;*/
	right: -200px;
z-index: 2;/*#header-imgよりも手前に配置*/
}
.header_mark img{
max-width: 900px;
}
@media only screen and (max-width: 1075px) {
.header_mark{
	position: fixed;
	top: 27%;
	right: -400px;
z-index: 2;/*#header-imgよりも手前に配置*/
}
.header_mark img{
width: 80%;
}
}
@media only screen and (max-width: 895px) {
.header_mark{
	position: fixed;
	top: 25%;
	right: -500px;
z-index: 2;/*#header-imgよりも手前に配置*/
}
}
@media only screen and (max-width: 760px) {
.header_mark{
	position: fixed;
	top: 25%;
	right: -550px;
		height: calc(98% / 2);
	overflow: hidden;
z-index: 2;/*#header-imgよりも手前に配置*/
}
}






/*モジュール バナー*/
.top_banner_area {
padding: 1.5em 0;
}
.top_banner_area ul{
/*padding-bottom: 20px;*/
}
.top_banner_area ul li{
text-align: center;
width: 100%;
}
.top_banner_area img{
margin: auto;
max-width:350px;
width: 98%;
}
.top_banner_area a{
display:inline-block;
}


.container{
  background: #fff;
}

.top_wrap{
background: #fff;
max-width: 1000px;
width: 100%;
margin: auto;
/*padding: 55px 0 10px;*/
/*padding: 30px 0 10px;*/
padding: 10px 0;
z-index: 2;
}

.wrap{
background: #fff;
max-width: 1000px;
width: 98%;
margin: auto;
padding: 0 0 10px;
}



/*終了後メッセージ*/
.thankstxt{
padding:30px 10px 20px;
font-size: 1.4em;
font-weight: bold;
text-align: center;
line-height: 1.4;
}

@media only screen and (max-width: 750px) {
.thankstxt{
font-size: 1.3em;
text-align: left;
line-height: 1;
}
}

@media only screen and (max-width: 640px) {
.thankstxt{
font-size: 1em;
}
}


/*リアルイベントボタン*/
.real_event_btn{
max-width: 1000px;
width: 100%;
text-align: center;
margin:0 auto 50px;
}
.real_event_btn img{
width: 98%;
}
.real_event_btn img:hover{
/*position: relative;
top: 1px;
opacity: 0.9;*/
}

.lang_button{
margin: 10px 0 0;
padding: 5px;
text-align: right;
}
.lang_button a {
    background: #eee;
    border-radius: 3px;
    position: relative;
/*    display: flex;
    justify-content: space-around;
    align-items: center;*/
    margin: 0 auto;
    max-width: 150px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #333;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.lang_button a:hover {
    background: #333;
    color: #FFF;
}
.lang_button a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.lang_button a:hover:after {
    border-color: #FFF;
}


/*==================================================
anime表示
===================================*/

/* 拡大 */
.zoomIn{
  animation-name:zoomInAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
  transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}

/*受付について*/
.top_uketuke_txt{
font-size: 1.3em;
line-height: 1.4;
margin-top: 10px;
}
@media only screen and (max-width: 640px) {
.top_uketuke_txt{
font-size: 1em;
line-height: 1.2;
margin: 10px;
text-align: left;
}
}



/*トップページ　お知らせ*/
.information_wrap{
border: 1px solid #c62205;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0,0,0,0.4);
margin: auto;
width: 100%;
overflow: hidden;
}
.information_wrap p{
font-size: 1.1em;
padding:15px 15px 10px;
line-height: 1.6;
}

.information_wrap h2{
background: #ffffff;
color: #FFFFFF;
font-size: 2.5em;
font-weight: bold;
padding:15px 10px 10px;
text-align: center;
}
.information_wrap h2 img {
max-width: 1000px;
width: 95%;
}
.information_wrap h2 span{
background: #e73e20;
border-radius: 10px;
display: block;
font-size: 30px;
margin-top: 15px;
padding: 5px;
}
.information_wrap h3{
background: #E5E5E5;
border-radius: 5px;
border-left: 5px solid #E73E20;
font-size: 1.2em;
font-weight: 700;
margin: 10px 5px 5px;
padding: 5px;
}
.information_wrap ul{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:space-around;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 99%;
	margin: auto;
}
.information_wrap ul li{
width: 49%;
margin: 0;
}
.information_wrap ul li p{
font-size: 1em;
padding: 5px 10px 10px;
}
@media only screen and (max-width: 675px) {
.information_wrap{
width:97%;
}
.information_wrap h2{
font-size: 1.3em;
}
.information_wrap h3{
font-size: 1em;
margin: 5px;
padding: 5px;
}
.information_wrap p{
font-size: 0.9em;
padding: 8px;
}
.information_wrap ul li p{
font-size: 0.9em;
padding: 5px 10px 10px;
}
}

/*おすすめ店のボタン2024設置*/
.osusume_mise_btn{
margin-bottom: 10px;
max-width: 1000px;
width: 100%;
text-align: center;
margin: 0 auto 15px;
}
@media only screen and (max-width:768px) {
.osusume_mise_btn{
width: 98%;
}
}
.osusume_mise_btn a{
background: #e73e20;
border-radius: 10px;
display: block;
margin: auto;
}
.osusume_mise_btn a:hover{
position: relative;
top: 1px;
}
.osusume_mise_btn img{
width:100%;
}

/*トップページ　youtube動画リスト表示*/
.movie_list{
background: #e83e20;
padding: 10px ;
margin-bottom: 1em;
}
.movie_list h3{
	display:flex;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
color: #FFFFFF;
font-weight: bold;
margin: 10px auto;
}
.youtube_logo{
max-width: 100px;
width: 100%;
margin: 0 5px;
}
@media only screen and (max-width: 482px) {
.youtube_logo{
margin:10px 5px 5px;
}
}
.movie_list ul{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:center;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
}
.movie_list ul li{
max-width: 250px;
width: 30%;
margin: 0 5px;
font-size: 0.9em;
color: #FFFFFF;
}
.movie_list ul li img{
width: 100%;
}
.movie_list p{
color: #FFFFFF;
font-size: 0.9em;
padding: 10px 0 0;
text-align: center;
}
@media only screen and (max-width: 640px) {
.movie_list{
margin-bottom: 20px;
}
.movie_list p{
text-align: left;
padding:10px ;
}
}



/*リード*/
.lead{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:space-around;
	align-items: center;
	flex-wrap: wrap;
max-width: 1000px;
width: 95%;
margin: 50px auto 0;
padding: 100px 0 50px;
}
.lead-txt{
margin: 20px auto 0;
}
@media only screen and (max-width: 400px) {
.lead-txt{
font-size: 1em;
text-align: center;
}
}
.lead img{
border-radius: 10px;
}





/*ニュース*/
.news_wrap{
/*background: rgba(255,228,201,0.5);*/
/*box-shadow: 0 0 10px rgba(0,0,0,.15);*/
overflow: hidden;
width: 100%;
padding:30px 0 0;
}
@media only screen and (max-width: 640px) {
.news_wrap{
width: 95%;
margin: auto;
}
}
.news_wrap h3 img{
max-width: 500px;
width: 100%;
}
ul.news_item{
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1200px;
	width: 100%;
	margin:0 auto;
	padding: 5px 0 10px;
	/*border: 1px solid #000000;*/
}
ul.news_item li{
background: rgba(255,255,255,0.8);
text-align: center;
margin: 0 auto 0;
width:98%;
}
@media only screen and (max-width: 640px) {
ul.news_item{
	padding: 5px 0;
}
ul.news_item li{
width: 95%;
}
}
ul.news_item li dl{
	display:-webkit-box;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:flex-start;
	flex-wrap: wrap;
	width: 100%;
	margin:0 auto;
padding: 10px 0;
}
ul.news_item li dt{
font-weight: bold;
width: 30%;
}
ul.news_item li dt time{
margin-right: 10px;
}
ul.news_item li dd{
font-weight: normal;
line-height: 1.5;
padding:0;
text-align: left;
width: 68%;
}
@media only screen and (max-width: 640px) {
ul.news_item li dt{
font-size: 0.9em;
text-align: left;
width: 100%;
}
ul.news_item li dd{
font-size: 0.85em;
padding:10px 0 0 10px;
text-align: left;
width: 100%;
}
}
.news_list_btn{
font-size: 0.9em;
padding:7px 30px 20px;
}
.news_list_btn a{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:flex-end;
	align-items: center;
	flex-wrap: wrap;
}

/*2023年ページのバナーエリア*/
.top-food2023_bn_area,.bottom-food2023_bn_area{
padding-top: 1em;
	width: 100%;
	text-align: center;
}
.top-food2023_bn_area img,.bottom-food2023_bn_area img{
	width: 100%;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
@media only screen and (max-width: 979px) {
.top-food2023_bn_area img,.bottom-food2023_bn_area img{
	width: 95%;
}
}

/*About*/
.about_wrap{
background:#fff url("../img/about_bg_pc.jpg") bottom no-repeat;
background-size: cover;
padding: 50px 0 0;
}
.about_wrap h3 {
text-align: center;
margin-bottom: 30px;
}
.about_wrap h3 img{
max-width: 700px;
width: 100%;
}
.about_txt{
max-width: 700px;
width: 100%;
margin: auto;
text-align: left;
}
.about_txt img{
max-width: 500px;
width: 100%;
}

.about_inner{
text-align: center;
position: relative;
padding-bottom: 100px;
}
.web_kaisai{
position: absolute;
bottom: 0;
right: 0;
}
.web_kaisai img{
max-width: 500px;
width: 100%;
}

@media only screen and (min-width: 1040px) {
.web_kaisai_sp{
display: none;
}
}

@media only screen and (max-width: 1040px) {
.about_wrap{
background: url("../img/about_bg_sp.jpg") top no-repeat;
background-size: cover;
padding: 60px 0 0;
}
.about_wrap h3 img{
max-width: 700px;
width: 90%;
}
.about_inner{
padding-bottom: 100px;
}
.about_txt {

}
.about_txt img{
max-width: 500px;
width: 85%;
margin-left: 20px;
}
.web_kaisai img{
max-width: 450px;
width: 100%;
}
.web_kaisai_sp{
display: none;
}
}
@media only screen and (max-width: 880px) {
.about_wrap h3{
/*text-align: left;*/
padding-left: 10px;
}
.about_wrap h3 img{
max-width: 700px;
width: 95%;
}
.about_inner{
margin: auto;
padding-bottom: 50px;
text-align: center;
}
.web_kaisai{
display: none;
}
.web_kaisai_sp{
display: block;
background: #FFFFFF;
padding: 5px 0;
width: 100%;
text-align: center;
}
.web_kaisai_sp img{
max-width: 500px;
width: 100%;
}
}

/*.about_notice{
background: rgba(255,245,179,.85);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.15);
color: rgba(255,73,76,1.00);
margin:20px auto;
padding: 10px 0;
max-width: 700px;
width: 100%;
}
.about_notice p{
font-weight: bold;
}
@media only screen and (max-width: 640px) {
.about_notice{
border-radius: 0;
text-align: left;
}
.about_notice p{
padding:3px 10px;
}
}
*/


section{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:space-between;
	flex-wrap: wrap;
	padding: 2em 0 0;
	/*padding: 30px 0 0;*/
}
@media only screen and (max-width: 980px) {
section{
justify-content:center;
}
}
section h2{
text-align: center;
margin: 20px auto 0;
}


section div.contents_box{
/*box-shadow: 0 0 10px rgba(0,0,0,.15);*/
border: 1px solid #e73e20;
max-width: 1000px;
width: 95%;
margin: 0 0 1em;
padding: 0;
}
@media only screen and (min-width: 980px) {
section div.contents_box{
max-width: 480px;
width: 100%;
}
}


/*会場マップ　ステージプログラム入口*/
ul.navi_btn {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:space-around;
	align-items: center;
	flex-wrap: wrap;
	margin:50px auto 0;
}
ul.navi_btn li{
width: 48%;/*43*/
margin: 10px 0;
}
ul.navi_btn li img{
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
width: 100%;
	transition: 0.2s ;
}
ul.navi_btn li img:hover{
transform: translateY(3px);
}
@media only screen and (max-width: 640px) {
ul.navi_btn li{
width: 100%;
margin: 10px 0;
}
}



.kuwashiku_btn{
text-align: right;
padding-right: 10px;
}
.kuwashiku_btn img{
max-width: 200px;
width: 100%;
}

/*ショップリスト*/
.shop_list_wrap{
background:#e73e20;
text-align: center;
}
.shop_list_inner{
padding: 20px 0;
text-align: center;
}


/*イベント*/
.top_event_wrap {
background:#e73e20;
}
.top_event_wrap_inner{

}
.top_event_wrap_inner img{
width: 100%;
}
.top_event_wrap_inner ul li{
border-bottom: 1px solid #ed7a66;
margin:10px 5px;
padding: 10px;
}
.top_event_wrap_inner ul li p{
padding:20px 5px 5px;
}
.top_event_wrap_inner a{
color: #ffffff;
}
.top_event_wrap_inner a:hover{
color: #fed3cb;
}


/*コラム*/
.column_wrap ul li{
border-bottom: 1px solid #CCCCCC;
margin:10px 5px;
padding: 10px;
font-size: 0.9em;
	display: flex;
    align-items: center;
    justify-content: flex-start;
}
.column_wrap ul li a{
	display: flex;
    align-items: center;
    justify-content: flex-start;
}
img.column_face{
width: 50px;
margin-right: 5px;
}


/*スライダー*/
.gallry_wrap{
}

ul.slider {
margin: 0 auto;
padding:0;
width: 100%;
border: 0px solid rgba(0,0,0,1.00);
}

ul.slider li{
}
ul.slider li section{
box-shadow: 0 0 2px rgba(0,0,0,0.4);
background: #FFFFFF;
border-radius: 8px;
margin:5px auto 25px;
max-width:300px;
padding: 5px;
}
ul.slider li a{
color: #000000;
transition:1s;
}
ul.slider li section:hover{
background: #FFFADA;
transition-duration: 0.2s;
}
ul.slider li a:hover{
color: #EB6DA5;
transition-duration: 0.2s;
}

ul.slider li img{
border-radius: 8px 8px 0 0;
width: 100%;
}
ul.slider li dl{
font-size: 14px;
padding: 10px;
}
ul.slider li dt{/*一行表示*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul li dd.category{
font-size: 15px;
font-weight: bold;
margin: 0 auto 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}


.footer{
z-index: 10/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}


/*scroll追加*/
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(100vw / 6);
}
.scroll-infinity__item>img {
  width: 100%;
}

.subheading {
    position: relative;
    padding: 0.5rem 0 .3rem;
    margin-bottom: 2.5rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.subheading::before {
    position: absolute;
    border-bottom: 4px solid #E83E20;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 162px;
    content: '';
}

@media only screen and (max-width: 640px) {
	
	.scroll-infinity__item {
  width: calc(100vw / 3);
}
}



/*Pick Up*/
.event_pickup{
border: 1px solid #E73E20;
border-radius: 8px;
margin: 20px auto 50px;
width: 100%;
}
.event_pickup h3{
background:#E73E20;
border-radius: 7px 7px 0 0;
color: #ffffff;
font-size: 1.5rem;
font-weight: bold;
padding: 0.8rem;
text-align: center;
}
.event_pickup li{
border-bottom: 1px dashed #E73E20;
font-size: 1em;
padding: 0.7rem;
}
.event_pickup li:last-child{
border-bottom: none;
}
.event_pickup a{
color: #E73E20;
font-weight: 500;
}

.event_pickup li dl {
width: 100%;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	justify-content:flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.event_pickup li dl dt{
max-width: 150px;
width: 30%;
}
.event_pickup li dl dt img {
width: 100%;
}
.event_pickup li dl dd{
width: 65%;
margin-left: 10px;
}
.event_pickup li dl dd span{
display: block;
font-weight: bold;
font-size: 1rem;
margin-bottom: 5px;
}
@media only screen and (max-width: 640px) {
.event_pickup li dl {
/*	justify-content:center;*/
}
.event_pickup li dl dt{
/*max-width: 640px;
width: 95%;*/
}
.event_pickup li dl dd{
font-size: 0.9em;
/*width: 95%;
margin-top: 5px;*/
}
}

/*問い合わせ*/
.contact{
border: 1px solid #C0C0C0;
border-radius: 14px;
padding: 3px;
}

.s_midashi{
margin: 50px auto;
}
.s_midashi h3{
font-size: 1.4em;
background: #E73E20;
border-radius: 10px;
/*border-left: 10px solid #AA2400;*/
color: #FFFFFF;
padding:10px;
}
.s_midashi p{
margin: 15px auto;
padding:0 10px;
line-height: 1.7;
}
.notice h3 img{
max-width: 100px;
width: 100%;
}
.notice ul {
margin: 15px auto 0;
}
.notice ul li{
padding: 5px;
}

ul.notes_en{

}
ul.notes_en li{
list-style: circle;
list-style-position: outside;
margin-left: 25px;
}

/*リンクエリア*/
.link_area{
    padding: 40px 0;
background: #f5f5f5;
text-align: center;
}
.link_area img{
max-width: 350px;
width: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
}

/*SNSエリア*/
.sns_area {
/*background:#FFE1C8;*/
/*background:#ce351a;*/
background: #e5e5e5;
    padding: 40px 0 40px;
}
.sns_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 320px;
    width: 98%;
    margin: auto;
}
.sns_btn li {
    width: 50px;
}
.sns_btn li a {
    display: block;
    line-height: 0;
}
.sns_btn li a img {
    max-width: 50px;
}