@charset "UTF-8";


h1,h2,h3,h4,main p,main a,main li,main dd,main dt,main tr,main th,main td,main span{
	font-family:"din-2014","Noto Sans JP", Verdana,"Hiragino Kaku Gothic ProN",Meiryo, sans-serif ;
	letter-spacing:.05em;
}
a{
	text-decoration:none;
	background-color:transparent;
    transition: 0.2s;
}
abbr[title]{
	border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted;
}
b,strong{font-weight:bolder}
code,kbd,samp{
	font-family:monospace,monospace;
    font-size:1em
}
small{font-size:80%}
img{
	width:100%;
	border-style:none;
}


main{
	background:#FFDA00;
	overflow-x:hidden;
}
.img1024{
	width:100%;
	max-width:1024px;
	margin:0 auto;
}
.inner1024{
	width:92%;
	max-width:1024px;
	margin:0 auto;
	line-height:1.9;
}

/* ふわっjs 　*/
.fadeUpTrigger,.fadeUpTrigger2{
	opacity: 0;
}

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeUp2{
	animation-name:fadeUpAnime2;
	animation-duration:2.5s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeUpAnime2{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* ふわっjs 　*/


h2{
	padding:0 1.6%;
	margin-bottom:32px;
	font-family:"din-2014", "Noto Sans JP",sans-serif;
	font-size:28px;
	font-weight:bold;
	border-radius:28px 0 28px 0;
	background:#111A17;
	color:#fff;
	display:flex;
	align-items:center;
	letter-spacing:.1em;
}
h2:before{
	content:"";
	width:88px;
	height:88px;
	margin-right:8px;
}
h2#event:before{
	background:url("../img/icon_event2.svg");
}
h2#info:before{
	background:url("../img/icon_info2.svg");
}
h2#company:before{
	background:url("../img/icon_company2.svg");
}
h2#access:before{
	background:url("../img/icon_access2.svg");
}
h3{
	width:100%;
	font-size:48px;
    font-weight: bold;
	font-family:"din-2014", "Noto Sans JP",sans-serif;
	border-bottom:2px solid #111A17;
    line-height: 0.85;
	letter-spacing:0.1em;
}
h3 span{
	font-size:20px;
}
.txt_right{
	text-align:right;
}
.sp{
	display:none;
}
.w1268{
	display:none;
}


.mv_bg{
	width:calc( 100% - 32px );
	position:relative;
}
.mv_bg .bg1,
.mv_bg .bg2{
	width:100%;
	height:43vh;
	min-height:400px;
}
.mv_bg .bg1{
	background:url("../img/main1.jpg");
	background-position:50% 55%;
	background-size:cover;
}
.mv_bg .bg2{
	background:url("../img/main2.jpg");
	background-position:center;
	background-size:cover;
	border-radius:0 0 3.6vw 0;
}

.ttl{
	width:90vw;
	position:absolute;
	top:0;
	bottom:0;
	left:3vw;
	display:flex;
	align-items:center;
}
.ttl img{
    max-height: 76vh;
	height:auto;
}
.days{
	margin:16vh auto 0;
	text-align:center;
    line-height: 1;
}

section{
	width:calc( 100% - 32px );
	padding:6%;
    box-sizing: border-box;
	background:#fffe;
	position:relative;
}
.section01 , .section03 , .section05{
	margin-left:32px;
	border-radius:6.4vw 0 0 6.4vw;
}
.section01{
	margin:22vw 0 22vw 32px;
	padding:18vw 5%;
    box-sizing: border-box;
}
.section02 , .section04{
	margin-right:32px;
	border-radius:0 6.4vw 6.4vw 0;
}
.section02 , .section03 , .section04 , .section05{
	margin-bottom:12vw;
}
.gallery{
	position:absolute!important;
	width:100vw;
    top: -12vw;
    left: -32px;
}
.gallery2{
	position:absolute!important;
	width:100vw;
    bottom: -12vw;
    left: -32px;
}
.gallery li,
.gallery2 li{
	margin-left:3vw;
    border-radius: 4%;
    overflow: hidden;
}
.about_ttl{
	font-size:32px;
	font-weight:bold;
    letter-spacing: .025em;
}
.about_img{
	width:100%;
	height:532px;
	margin-top:4%;
	background:url("../img/marinemesse.jpg") center;
	background-size:cover;
	border-radius:32px 0 32px 0;
    line-height: 0;
}
.news{
	margin-top:64px;
}
.news ul li{
	padding:2% 4%;
	border-bottom:1px solid #1a131124;
}
.news ul li:last-child{
	border-bottom:2px solid #1a1333;
}

.menu_box{
	margin-bottom:12vw;
}
.menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.menu li{
	width:18%;
	margin-top:4%;
	text-align:center;
	font-size:20px;
	font-weight:bold;
}
.event_img{
	line-height:1;
}
.event_img img{
	margin-bottom:32px;
	border-radius:32px 0 32px 0;
}
.event_img video{
	width:100%;
	margin-bottom:32px;
}
.food{
	width:100%;
	margin-top:8%;
}
.food_ttl{
	width:100%;
	text-align:center;
}
.food_ttl img{
	width:auto;
	height:160px;
	border-radius:0;
}
.food_img{
	display:flex;
	flex-wrap:wrap;
}
.food_days{
	width:100%;
	text-align:center;
}
.food_days p{
	margin-bottom:24px;
	padding:8px 20px;
	display:inline-block;
	border-radius:32px;
	background:#12486e;
	color:#fff;
	font-size:120%;
}
.food_days p.sun{
	background:#e72f39;
}
.food_days p span{
	font-size:85%;
}
.food_img .food_contents{
    width: 32%;
	margin-right:2%;
	margin-bottom:2%;
}
.food_img .food_contents:nth-child(3n){
	margin-right:0;
}
.food_img .food_contents p{
	line-height:1.6;
	text-align:center;
}
.food_img .food_contents p strong{
	font-size:125%;
}
.food_img img{
	width:100%;
	margin-bottom:16px;
	border-radius:4% 0 4% 0;
}

.info th{
	width:144px;
	padding:24px 24px 12px 24px;
	font-size:18px;
	font-weight:bold;
	text-align:left;
	vertical-align:middle;
	border-bottom:2px solid #1A1311;
}
.info table{
    width: 100%;
	border-collapse: collapse;
}
.info td{
	width:calc( 100% - 144px );
	padding:24px 12px 24px 24px;
	font-size:16px;
	border-bottom:2px solid #1a13113d;
}
.info td .p-event-detail-pict{
	display:flex;
    flex-wrap: wrap;
	align-items:center;
}
.info td .p-event-detail-pict li{
	width:64px;
	margin-right:12px;
    line-height: 0;
}
.info td a{
	margin-left: 24px;
    color: #e72f39;
    text-decoration: underline;
    display: inline-block;
}
.info td a:after{
	content:"　>";
	text-decoration:none;
}
.info td strong{
	font-size:115%;
}
.info td .ticket_box{
	color:#fff;
	padding:8px 16px;
	background:#1A1311;
	font-size:115%;
	font-weight:700;
	border-radius:16px 0 16px 0;
	display:inline-block;
}

.access_contents iframe {
	border-radius:24px;
}
.access_contents1{
	margin-top:16px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
.access_contents1 a{
	padding:14px 24px;
	background:#1A1311;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	border:1px solid #1a13113d;
	border-radius:20px 0 20px 0;
}
.access_contents1 a:hover{
	background:#fff;
	color:#e72f39;
}
.access_contents1 p strong{
	font-size:140%;
}
.access_contents2{
	margin-top:60px;
	display:flex;
	flex-wrap:wrap;
}
.access_contents2 .way{
	margin-right:32px;
	margin-bottom:32px;
}
.access_contents2 .way_ttl{
	margin-bottom:12px;
	font-size:130%;
	font-weight:bold;
}
.access_contents2 .way_box{
	padding:14px 20px;
	border:1px solid #1a131177;
	border-radius:20px 0 20px 0;
}
.access_contents2 .way:last-child{
	margin-right:0;
}


.company_flex{
	margin-top:24px;
	display:flex;
	flex-wrap:wrap;
}
.company_flex a{
    width: calc(100% / 3 - 8px);
    padding: 10px 6px 8px;
    margin: 4px;
    line-height: 1.5;
    display: inline-block;
    font-size: 14px;
    box-sizing: border-box;
    text-align: center;
    border: solid 1px #ffe12f;
    background: #fff8d2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.company_flex a:hover{
	background:#ffe12f;
	color:#fff;
}

.contact{
    margin-bottom: 12vw;
}
.contact_btn{
    width: 100%;
    padding: 4%;
    line-height: 0;
    display: inline-block;
    text-align: center;
	box-sizing:border-box;
    background: #1A1311;
    border-radius: 32px 0 32px 0;
}
.contact_btn:hover{
	background:#e72f39;
}
.contact_btn img{
	width:620px;
	max-width:90%;
}


@media screen and (max-width: 1268px) {
	.w1268{
		display:block;
	}
}


/* ブレイクポイントは960px */
@media screen and (max-width: 960px) {
	
	.section01{
    	margin: 32vw 0 28vw 32px;
		padding:32vw 5%;
	}
	.about_ttl{
		font-size:27px;
	}
	
	.info th{
		width:100px;
	}
	.info td{
		width:calc( 100% - 100px );
	}
	
	.access_contents2 .way{
		width:100%;
		margin-right:0;
	}
	.access_contents2 .way_box{
        padding: 3.4% 4.2%;
        border-radius: 16px 0 16px 0;
	}

}

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

	.days{
	    margin:10vh auto 0;
	}
	
	.about_ttl{
        font-size: 3.2vw;
	}
	.about_img{
		height:400px;
	}
	.news ul li{
		padding:4% 5%;
	}
	
	.info th{
		width:80px;
    	padding: 20px 20px 12px 16px;
	}
	.info td{
		width:calc( 100% - 80px );
	}
	.info td .ticket_box{
		font-size:110%;
	}
	.info td .p-event-detail-pict li{
		width:52px;
	}
	.info td a.ticket_btn{
		margin-top:16px;
		margin-left:0;
	}
	
	.access_contents iframe{
		height:380px;
	}
	.access_contents1 a{
		font-size:15px;
	}
	
	.company_flex a{
		width: calc(100% / 2 - 8px);
	}
}


@media screen and (max-width: 640px) {
	body{
		font-size:3.5vw;
	}
	h2{
        padding: 0 0 0 2.8%;
        margin-bottom: 4vw;
        font-size: 5.6vw;
   		border-radius: 3vw 0 3vw 0;
	}
	h2:before{
        width: 13vw;
        height: 13vw;
		margin-right:8px;
	}
	h3{
		font-size:11.2vw;
	}
	h3 span{
		font-size:5.2vw;
	}
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
	.mv_bg{
		width:96%;
	}
	.mv_bg .bg1, .mv_bg .bg2{
		height:28vh;
    	min-height:auto;
	}
	.days{
        margin:6.4vh auto 0;
	}
	
	section{
		width:96%;
		padding:10vw 5%;
	}
    .section01 {
        margin:58vw 0 58vw 32px;
        padding:44vw 5%;
    }
	.section01, .section03, .section05{
		margin-left:4%;
	}
	.section02, .section04{
		margin-right:4%;
	}
	
	.gallery{
		top:-40vw;
        left: -4.24%;
	}
	.gallery2{
    	bottom: -40vw;
        left: -4.24%;
	}
	.about_ttl{
		font-size:4.64vw;
	}
	.about_img{
		height:56vw;
	    margin-top: 6.4%;
	}
	.news{
		margin-top:14.4vw;
	}
	.news ul li{
		font-size:3.5vw;
	}
	
	.menu {
		justify-content:center;
	}
	.menu li{
		width:27%;
		margin-right:4%;
		font-size:3.6vw;
	}
	.menu li:last-child{
		margin-right:0;
	}
	.menu li:nth-child(3n){
		margin-right:0;
	}
	
	.event_img img{
		margin-bottom:4vw;
	    border-radius: 2.64vw 0 2.64vw 0;
	}
	.event_img video{
		margin-bottom:4vw;
	}
	.food{
		margin-top:5.6vh;
	}
	.food_ttl img{
        width: 50vw;
        height: auto;
		margin-bottom:0;
		border-radius:0;
	}
	.food_img{
		justify-content:space-between;
	}
	.food_days p{
		margin:8vw auto 4.8vw;
	}
	.food_img .food_contents{
		width: 49%;
        margin-right: 0;
		margin-bottom:4%;
	    border-radius: 2.64vw 0 2.64vw 0;
	}
	.food_img .food_contents:nth-child(3n){
        margin-right: 0;
	}
	.event_img .food_img img{
		margin-bottom:2vw;
	}
	.food_img .food_contents p{
		font-size:3.35vw;
		line-height:1.5;
		text-align:left;
	}
	.food_img .food_contents p strong{
		font-size:110%;
	}
	
	.info tr{
		margin-bottom:4vw;
		display:flex;
		flex-wrap:wrap;
		border:solid 1px #555;
	}
	.info th , .info td{
		width:100%;
        padding: 4vw;
	}
	.info th {
        background: #555;
        color: #fff;
        line-height: 1;
		border:none;
		font-size:4vw;
	}
	.info td {
        background: #fff;
		border:none;
		font-size:3.5vw;
	}
	.info td .ticket_box{
	    border-radius: 2.64vw 0 2.64vw 0;
	}
	.info td .p-event-detail-pict li{
        width: 20%;
        margin: 0 1.2% 2.4%;
	}
	
	.access_contents iframe{
		height:32vh;
		border-radius:2vw;
	}
	.access_contents1{
		margin-top:1vh;
	}
	.access_contents1 a{
		margin-top:1.6vh;
		padding:3.2vw 5vw;
	    border-radius: 2.64vw 0 2.64vw 0;
		font-size:3.7vw;
	}
	.access_contents2{
		margin-top:6vh;
	}
	.access_contents2 .way{
    	margin-bottom: 3vh;
	}
	.access_contents2 .way:last-child{
		margin-bottom:0;
	}
	.access_contents2 .way_box{
        padding:4vw;
		font-size:3.3vw;
        border-radius: 3vw 0 3vw 0;
	}
	
	.company_flex{
		margin-top:1vh;
	}
	.company_flex a{
        width: 100%;
        margin: 0 auto 2vw;
        padding: 3vw 2vw 2.8vw;
        font-size: 3.4vw;
	}
	
	.contact{
		margin:10vh auto;
	}
	.contact_btn{
        border-radius: 3vw 0 3vw 0;
	}
}