/* CSS Document */
h2{margin-top: -10px;}
h3{margin-bottom: 10px;}
/* =======================
  scroll
========================== */

.container {
	z-index:10;
	overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}

.area {
  scroll-snap-align: center;
}
.container section:nth-of-type(4){
scroll-snap-align:start;
}

.back_white {
	background-color: rgba(255,255,255,0.85);
	padding: 100px 125px;
	width: 95%;
	margin: 150px auto;
}

.back_white h2{
	padding-bottom: 20px;
	border-bottom: solid 2px;
}

@media screen and (max-width: 830px) {
	.back_white{
		padding: 70px 30px;
		margin: 70px auto;
	}
	.area{
  scroll-snap-align: none;
	}
	.container {
  scroll-snap-type:none;
	}
}

@media screen and (max-width: 480px) {
	.back_white{
	background-color: rgba(255,255,255,0.9);
	margin: 0px auto;
	}
}

/* =======================
   nav
========================== */
.top_insta{
	top:36px;
	right:200px;
	position:fixed;
	z-index: 99;
}
#g-nav{
	position:fixed;
	z-index: 99;
	top: 0;
	right: -60%;
	width: 50%;
	height: 100vh;
	background: var(--color-pink);
	transition: all 0.4s;
}
#g-nav.panelactive{
  right: 0;
}
#g-nav ul {
	position: absolute;
	z-index: 99;
	top: 40%;
	left: 27%;
	transform: translate(-50%,-50%);
}
#g-nav li a{
	list-style: none;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
	transition: all .2s;
}
#g-nav li a:hover{
		color: rgba(255,255,255,0.70);
}
.openbtn{
	position: fixed;
	z-index: 101;
	top:30px;
	right: 30px;
	cursor: pointer;
	width: 130px;
	height:60px;
	background: var(--color-pink);
	border-radius: 30px;
}

/*×に変化*/
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  border-radius: 2px;
  background-color: #FFFFFF;
  left: 35%;
  content: "";
  width: 40px;
  height: 3px;
}
.openbtn span:nth-of-type(1) {
  top:20px; 
}
.openbtn span:nth-of-type(2) {
  top:28px;
}
.openbtn span:nth-of-type(3) {
  top:36px;
}
.openbtn.active span{
  background-color:var(--color-pink);
	height: 4px;
}
.openbtn.active {
  position:fixed;
  z-index: 101;
  top:30px;
  right: 30px;
  cursor: pointer;
  width: 130px;
  height:60px;
	background: #fff;
	border-radius: 30px;
}
.openbtn.active span:nth-of-type(1) {
	top: 23px;
	left: 35%;
	transform: translateY(6px) rotate(-45deg);
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
	left: 70%;
}
.openbtn.active span:nth-of-type(3){
  top: 35px;
  left: 35%;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
.nav_insta{
	position: absolute;
  z-index: 99;
  top:82%;
  right:30px;
}
.HP_link{
	position: absolute;
	top:90%;
  right:30px;
}
.HP_link a{
	color:#fff;
}
.HP_link a:hover{
	color: rgba(255,255,255,0.70);
}
.HP_link a:nth-of-type(2){
	margin-left: 30px;
}
.mask{
	display: none;
}
.mask.active{ 
	display: block;
  position: fixed;
  background: rgba(45,49,40,0.80);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

@media screen and (max-width: 980px) {
	.top_insta{
		display: none;
	}
	.mask.active{display: none;
	}
	#g-nav{
    right: -120%;
  	width:100%;
	}
}
@media screen and (max-width: 480px){
	.openbtn{
		top:15px;right: 15px;
	}
	.openbtn.active{
		top:15px;right: 15px;
	}
.HP_link{display: none;
	}
	#g-nav ul{
		top:75%;
	}
	.nav_insta{ 
		left:7%;
    top:45%;
		right: auto;
		width: 50px;
	}
	.openbtn{
		top:20px;
		right: 20px;
		width: 90px;
		height:40px;
		border-radius: 20px;
	}
	.openbtn span{
		left: 34%;
		content: "";
		width: 30px;
	}
	.openbtn span:nth-of-type(1) {
  	top:11px; 
	}
	.openbtn span:nth-of-type(2) {
  	top:19px;
	}
	.openbtn span:nth-of-type(3) {
		top:27px;
	}
	.openbtn.active {
		top:20px;
		right: 20px;
		width: 90px;
		height:40px;
		border-radius: 20px;
	}
	.openbtn.active span:nth-of-type(1) {
		top: 12px;
		left: 35%;
	}
	.openbtn.active span:nth-of-type(3){
		top: 24px;
		left: 35%;
		width: 32%;
	}
}

/* =======================
   top
========================== */
.backgraund::before{
	position: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	min-height: 100vh;
	width: 100%;
	z-index: -10;
	content: '';
	background-image: url(../image/backgraund1.jpg);
}

.top_image{
	z-index: -5;
	position: fixed;
	max-width: 800px;
	left:-7%;
	top:-8%;
}
.top_exhivision{
	text-align: right;
	margin: 350px 100px auto auto;
}
.firstview {
	scroll-snap-align: end;
}

@media screen and (max-width: 1024px) {
	.top_image{
	top:10%;
	left:-2%;
	}
}
@media screen and (max-width: 830px) {
  .backgraund::before{
		background-image: url(../image/backgraund_tb.jpg);
	}
	.top_exhivision{
		text-align: center;
		margin: auto;
	}
	.top_title{
		margin: 150px auto auto;
		width: 90%;
	}
	.top_image{
		width: 100%;
		left:-4%;
		top:3%;
	}
	.top_date{
		background: rgba(255,255,255,0.9);
		margin-top: 400px;
		padding: 30px 0 30px;
	}
	.container {
  scroll-snap-type: none;
	}
}
@media screen and (max-width: 480px) {
	.top_image{
		width: 130%;
		top: 10%;
		left: -20%;
	}
	.top_title{
		margin: 180px auto auto;
	}
	.top_date{
		margin-top: 200px;
		padding: 10px 70px 10px;
	}
}


/* =======================
   greeting
========================== */
.greeting_frame{
	margin-top: 500px;
	color: var(--color-pink);
}
.greeting_frame p{color: var(--color-black);}
.greeting_text{
	margin-bottom: 20px;
}
.greeting_p{
	margin: 40px auto 0;
	width: 97%;
}
.p_right{
	text-align: right;
	margin: 0 auto ;
}
.greeting_text p:first-child{margin-bottom: 10px;}
.greeting_text span{display: inline-block;}

@media screen and (max-width: 830px) {
	.greeting_frame{margin-top: 300px}
	.greeting_p{width: 93%}
}
@media screen and (max-width: 480px) {
	.greeting_frame{margin-top: 200px;}
	.greeting_p{width: 100%}
}

/* =======================
   outline
========================== */
.outline_frame{
	color: var(--color-blue);
}
.outline_flex{
	margin: 40px auto 0px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 97%;
}
.outline_frame p{color: var(--color-black);}
.outline_frame span{display: inline-block;}
.outline_box3rd{order: 3;}
.outline_frame h3{
	display: flex;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
}
.outline_box{
	max-width: 560px;
	width: 45%;
}
.nuas_flex{display: flex;
	justify-content: space-between;
	gap:20px 30px;
	flex-wrap: wrap
}
.outline_box img{
	max-width: 200px;
}
.outline_frame h3::after {
	margin-left: 20px;
	content: '';
	width: 100%;
	height: 1px;
  border-top: solid 1px var(--color-blue);
}
.p_b{
	font-weight: 800;
	margin-bottom: 5px;
}
.outline_box3rd p:nth-of-type(3){
	margin-top: 10px;
}
.nuas_d p:nth-of-type(2){
	margin-top: 10px;
}
.text_link{
  display: inline-block;
  transition: .3s;
  color:var(--color-black);
	border-bottom: solid 1px;
}
.text_link:hover{
  transform: scale(1.1);/*1.1倍大きく*/
}
@media screen and (max-width: 830px) {
	.outline_flex{display: block;
	width: 93%}
	.outline_box{width: 100%;
	max-width:none;}
	.h3_m{margin-top: 80px;}
	.nuas_flex{justify-content:flex-start;}
}
@media screen and (max-width: 480px) {
.outline_flex{width: 100%}
}

/* =======================
   map
========================== */

.map_frame{
	color: var(--color-green);
}
.map_flex{
	margin: 40px auto 0;
	color:var(--color-black);
	display: flex;
	justify-content: space-between;
	width: 97%;
}
.map_flex span{display: inline-block;}
.map_d_flex{
	margin-top: 15px;
	font-size: 1.4rem;
	max-width: 600px;
	display: flex;
	justify-content: space-between;
}
.map_d_1 p,.map_d_2 p{
	margin-left: 35px;
}
.map_d_1 h3{
	background:url("../image/map_mark1.svg") no-repeat 0 center / 30px auto;
	padding: 0px 0px 5px 35px;
	}
.map_d_2 h3{
	background:url("../image/map_mark2.svg") no-repeat 0 center / 30px auto;
	padding: 0px 0px 5px 35px;
	margin-top: 10px;
}
.map_d_flex div{
	width: 48%;
}
.map_d_2,.map_d_1{max-width:700px;}
.map_img{margin-right: 20px;}
.map_d_2{
	margin-bottom: 100px;
}
.map_venue p{color: var(--color-black);}
.map_photo_flex{
	display: flex;
	justify-content: space-between;
	gap:10px;
	margin-left: 16px;
}
.sb_h4 {
	font-size: 2.5rem;
	border-left: solid 5px var(--color-green);
  display: flex;
	padding-left: 10px;
	margin-bottom: 10px;
}
.sb_h4 span{
	font-size: 2rem;
	margin-left: 20px;
  display: flex;
  align-items: center; /* 垂直中心 */
}
.sb_h4 span:before, .sb_h4 span:after {
  border-top: 3px solid;
  content: "";
  width:13px; 
}
.sb_h4 span:before {
  margin-right: 10px; 
}
.sb_h4 :after {
  margin-left:10px; 
}
.sb_h4 br{display: none}
.map_group{margin-top: 50px;}
.map_venue_p{
	margin-left: 16px;
}

@media screen and (max-width: 1050px) {
	.map_photo_flex{
		display: block;
	}
	.map_photo_flex div{
		margin: 10px auto 0;
		width: 90%
	}
	.map_frame .p_right{width: 90%;}
	.map_flex{display: block;}
	.map_d_flex{
		max-width: 650px;
	}
	.map_img{
		margin: 0px auto;
	}
	.map_d_1{margin-top: 50px;}
	.map_img img{width: 100%;}
}
@media screen and (max-width: 830px) {
	.map_flex{width: 93%;}
	.sb_h4{display: block;}
	.sb_h4 span{
		display: inline-block;
		margin: 4px 0 0;
	}
	.sb_h4 span:before, .sb_h4 span:after {display: none;}
	.sb_h4 br{display: block;}
}
@media screen and (max-width: 480px) {
	.map_d_flex{
		margin-top: 20px;
		display: block;
	}
	.map_d_1 p,.map_d_2 p{margin-left: 0px;}
	.map_d_flex div:nth-of-type(2){margin-top: 20px;}
	.map_d_2{margin-top: 45px;}
	.map_d_flex div{width: 100%;}
	.map_flex{width: 100%}
}


/* =======================
   talkevent
========================== */
.talkevent_frame{
	color: var(--color-yellow);
	margin-bottom: 0px;
}
.talkevent_frame p{
	color: var(--color-black);
}
.talkevent_p{
	margin: 40px 0 60px;
}
.slider {
    width:94%;
    margin:0 auto;
}
.slider img {
    width:40vw;
    height:auto;
}
.slider .slick-slide {
	transform: scale(0.8);
	transition: all .5s;
}
.slider .slick-slide.slick-center{
	transform: scale(1);
}
.slick-prev, 
.slick-next {
	position: absolute;
	top: 43%;
	cursor: pointer;
	outline: none;
	border-top: 5px solid var(--color-yellow);
	border-right: 5px solid var(--color-yellow);
	height: 20px;
	width: 20px;
}
.slick-prev {
	left: -3%;
	transform: rotate(-135deg);
}
.slick-next{
	right: -3%;
	transform: rotate(45deg);
}
.slick-dots {
	text-align:center;
	margin:20px 0 0 0;
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width:12px;
    height:12px;
    display:block;
    border-radius:50%;
    background:#fff;
}
.slick-dots .slick-active button{
    background:var(--color-yellow);
}


.hide-area{
	display: none;
}
.timetable_link{
	font-size: 	1.8rem;
	position: relative;
	text-decoration: none;
	display: inline-block;
	background:var(--color-yellow);
	color:#fff;
  padding: 10px 50px 10px 40px;
	border-radius:30px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}
.timetable_link:hover{
	background:var(--color-yellow);
}
.btnarrow::after{
    content: '';
	position: absolute;
    top:44%;
    right: 18px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: all .3s;}
.btnarrow:hover::after{
    right: 12px;}
.timetable_window{
	text-align: center;
}
.modaal-list{text-align: center;
}

.talkevent_flex{
	margin:80px auto 0px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 97%;}

.talkevent_box{
	max-width: 700px;
	width: 45%;
}
.talkevent_box h3::after{
	margin-left: 20px;
 	content: '';
	width: 100%;
	height: 1px;
  border-top: solid 1px var(--color-yellow);
}
.talkevent_box h3{
	display: flex;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
}
.talkevent_flex span{display: inline-block;}

@media screen and (max-width: 830px) {
	.slider img {width:50vw;}
	.talkevent_flex{
		display: block;
		width: 93%
	}
	.talkevent_box{
		width: 100%;
		max-width:none;
	}
	.box2{margin-top: 30px;}
}
@media screen and (max-width: 480px) {
	.slider {
    width:100%;}
	.slider img {
		width:65vw;}
	.slick-prev, 
	.slick-next {
			display: none;}
	.slick-dots{
		display: none;}
	.modaal-list{margin-top: 20px;}
	.outline_flex{width: 100%}
}
footer{
	text-align: center;
	z-index: 100;
	margin: 10px 0;
}