@charset "utf-8";
/*
header {
    background: rgba(0,0,0,0.7);
	border-bottom: 2px solid #1AAF9A;
	padding: 0 0 2px 0;
}
*/

#contents_title_box {
	position: relative;
	padding: 40px 20px 40px 120px;
	border-top: solid 81px #333;
	background: #4c64d3; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #4c64d3 0%, #7fe074 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #4c64d3 0%,#7fe074 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #4c64d3 0%,#7fe074 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#contents_icon {
    width: 70px;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 60px;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

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

#contents_title_box h2 {
	font-size: 25px;
	color: #FFF;
}

#contents_container {width: 100%;}

/*-----------------------------*/
#mov_box,
#activity_box {
	width: 96%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 2em 0 0;
}
.mov_box_inner,
.activity_box_inner {margin: 0 auto 3em;}

.mov_content,
.activity_content {
    margin: 0 auto 4em;
/*	width: 96%;*/
	max-width: 1200px;
}

.mov_box_inner h3,
.activity_box_inner h3 {
    font-size: 34px;
    text-align: center;
    padding: 40px 0 40px;
    color: #000;
}

.activity_box_inner h3 span {
    background: linear-gradient(transparent 50%, #1AAF9A 100%);
}

.mov_box_inner h4,
.activity_box_inner h4 {
	font-size: 18px;
	padding: 15px;
	background-color: #1AAF9A;
	color: #FFF;
	box-sizing: border-box;
	margin: 0 0 10px;
}

.mov-item,
.activity-item {
	max-width: 800px;
	width: 95%;
	margin: 0 auto;
	padding: 30px 0 0; 
}

.mov-item img,
.activity-item img,
.mov-item-nav img,
.activity-item-nav img {width: 100%;}


.mov-item-nav,
.activity-item-nav {
	max-width: 600px;
	width:  95%;
	margin: 0 auto;
}

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
     left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}

.expoList {
	margin-top: 1em;
/*
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 3em;
*/
}
.expoList>li {}
.expoList>li>h3 {padding: inherit;}
.expoList>li>p {
	padding: inherit;
	margin: inherit;
	line-height: 1.4;
}

.mov_box_inner dl,
.activity_box_inner dl {
	padding: 40px 0;
	list-style: none;
}

.mov_box_inner dt,
.activity_box_inner dt {
	font-weight: bold;
	background-color: #F1F1F1;
	padding: 4px;
	box-sizing: border-box;
}

.mov_box_inner dl dd,
.activity_box_inner dl dd {
	margin: 0 0 20px;
	padding: 0 4px;
	box-sizing: border-box;
}

.mov_box_inner p,
.activity_box_inner p {
	padding: 40px 0;
	list-style: none;
	max-width: 1000px;
    margin: 0 auto;
    line-height: 2;
}

.mov_box_inner span.date01,
.activity_box_inner span.date01 {font-weight: bold;}

.activtiy_entry_btn {
	max-width: 500px;
	width: 80%;
	margin: 0 auto;
	padding: 0 0 40px;
}

.activtiy_entry_btn a {
	display: inline-block;
	width: 100%;
	text-align: center;
	color: #FFF;
	border: 2px solid #1AAF9A;
	background-color: #1AAF9A;
	padding: 15px 5px;
	box-sizing: border-box;
	border-radius: 20px;
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	text-decoration: none;
}

.activtiy_entry_btn a:hover {
	color: #1AAF9A;
	background-color: #FFF;
}

/*==================================================
スライダーのためのcss
===================================*/
.slick-slider {
    /* position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent; */
    max-width: 800px;
    margin: 0 auto;
}

/*画像の横幅を100%にしてレスポンシブ化*/
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{margin:0 0 5px 0;}

.gallery li{list-style:none;}

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/
.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
	width:25%!important;
	list-style:none;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}
.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}
.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}

.mov_sttl,
.activity_sttl {
	text-align: center;
	font-weight: bold;
	font-size: 1.4rem;
}

/* メーカーブース　ロゴレイアウトcss */
#expartner_list {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
#expartner_list li a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#expartner_list li a img {
    vertical-align: bottom;
    height: 150px;
    object-fit: contain;
    max-width: 90%;
}

.item {
	margin: auto;
	max-width: 600px;
}

/* 画像レイアウトcss */
.mov-item_nml,
.activity-item_nml {
	max-width: fit-content;
	margin: 0 auto;
}
.mov-item_nml * + *,
.activity-item_nml * + * {margin-top: 1em;}

.expoList a {
	display: inline-block;
	font-size: 1.5em;
	color: #000;
	margin-right: .3em;
	vertical-align: middle;
}

.live,
.ows {
	display: flex;
	flex-wrap: wrap;
}
.live>img {width: calc(100% / 3);}
.ows>img {width: 50%;}

.sponsor_common {
	display: grid;
/*	grid-template-columns: repeat(4, 1fr);*/
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2em 0;
}


.foodrnk {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: auto;
	line-height: 1.4;
}

.foodrnk>li {
	width: 50%;
	margin-bottom: .6em;
}

.movie_list_box,
.traffic_movie_list_box
 {background-color: rgba(255,255,255,0.10);}

.movie_list_box p,
.traffic_movie_list_box p {
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
}

.movie_list,
.traffic_movie_list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	list-style: none;
	padding: .5em;
	box-sizing: border-box;
	justify-content: center;
}


.movie_box {
/*	width: 30.3333%;*/
	margin: 1.5%;
}

@media screen and (max-width:768px) {
	.movie_box {
			width: 90%;
			margin: 0 auto 30px;
	}
}

.movie_img {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 8px;
/*	background-color: rgba(26,175,154,0.80);*/
}




.movie_img a {
	display: block;
	width: 100%;
	position: relative;
}

.movie_img h4 {
    color: #FFF;
	font-size: 18px;
	padding: 4px 0;
	text-align: center;
}

@media screen and (max-width:600px) {
	.movie_img h4 {
		font-size: 15px;
	}
}

.movie_img h4 span {
	font-size: 16px;
}

@media screen and (max-width:600px) {
	.movie_img h4 span {
		font-size: 14px;
	}
}

.play_box {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	width: 25%;
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
/*	opacity: 0.6;*/
}

.movie_img a:hover .play_box {
	width: 28%;
	opacity: 0.9;
}

.play_box img {
	width: 100%;
	vertical-align: bottom;
	z-index: 2;
	
}

#mov_box h5,
#traffic_box h5 {
	text-align: center;
	color: #FFF;
	font-size: 18px;
	padding: 5px 30px;
	background-color: rgba(26,175,154,0.80);
	width: 70%;
	max-width: 500px;
	margin: 50px auto 20px;
}

#rikaido {
	width: 100%;
	padding: 8% 0;
}

.rikaido_btn {
	max-width: 500px;
	width: 95%;
	margin: 40px auto;
	
}

.rikaido_btn a {
	display: inline-block;
	width: 100%;
	background-color: rgba(26,180,227,1.00);
	text-align: center;
	padding: 15px;
	box-sizing: border-box;
	border-radius: 15px;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
}

#mov_box .rikaido_btn p,
#traffic_box .rikaido_btn p {
	font-size: 14px;
}

@media screen and (min-width: 431px) {
	.foodrnk {width: 90%;}
	.foodrnk>li {width: 33%;}
}

@media screen and (min-width: 641px) {
	.expoList {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3em;
	}
	.foodrnk {text-align: center;}
}

@media screen and (min-width: 769px) {
	.foodrnk>li {width: 25%;}
	.expoList a[href*="facebook.com"]>i:hover {color: #1877F2;}
	.expoList a[href*="instagram.com"]>i:hover {color: #e1306c;}

	.shimatri-pass {
		width: 100%;
		height: 50vh;
	}
	#mov_box {width: 100%;}
}

@media screen and (max-width:768px) {
	#contents_title_box {
		border-top: solid 80.92px #333;	
		padding: 25px 15px 25px 75px;
	}

	#contents_icon {
		width: 45px;
		left: 40px;
	}

	#contents_title_box h2 {font-size: 19px;}

	.mov_box_inner,
	.activity_box_inner {margin: 0 auto 40px;}
	.mov_content,
	.activity_content {margin: 0 auto 36px;}
	#mov_box p,
	#activity_box p {padding: 20px 0;}
	.mov-item,
	.activity-item {padding: 0; }
	#mov_box dl,
	#activity_box dl {
		padding: 20px 0;
		list-style: none;}

	.live>img {width: 50%;}
	.expoList a[href*="facebook.com"]>i {color: #1877F2;}
	.expoList a[href*="instagram.com"]>i {color: #e1306c;}

	#expartner_list {grid-template-columns: 1fr 1fr 1fr;}
	#expartner_list li a img {height: 90px;}
	.mov-item_nml,
	.activity-item_nml {width: 98%;}

	.shimatri-pass>iframe,
	.shimatri-pass {
		height: 400px;
	}
}

@media screen and (max-width: 600px) {
	#mov_box h3,
	#activity_box h3 {
		font-size: 26px;
		padding: 30px 0 20px;
	}
}