@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600&display=swap");
@font-face{ 
	font-family: 'HanaMinA';
	src: url('./fonts/HanaMinA.eot');
	src: url('./fonts/HanaMinA.eot?#iefix') format('embedded-opentype'),
		url('./fonts/HanaMinA.woff') format('woff'),
		url('./fonts/HanaMinA.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.flex-wrap{
	display:flex;
}

@media screen and (min-width: 481px){
	.pc{ display:block;}
	.sp{ display:none; }
}
@media screen and (max-width: 480px){
	.pc{ display:none;}
	.sp{ display:block; }
}

/* ===========================
�@ �ΐ��������{�u�Ă̌|�p�Ձv2025
============================= */
#container{
	width:100%;
	margin:0 auto 20px;
}

#setouchi-artfest{
	width:100%;
	margin:0 auto;
	padding: 0;
}
/* animation */
.animation {
	overflow: hidden;
	position: relative;
}
.animation img{
	display:block;
	width:100%;
}
@media screen and (min-width: 481px){
	.animation .pc{ display:block;}
	.animation .sp{ display:none; }
}
@media screen and (max-width: 480px){
	.animation .pc{ display:none;}
	.sp{ display:block; }
}

.logo-sup,.ani-logo,.day,.text,.image1,.image2,.image3,.link_other { position: absolute; }

.logo-sup {
	width: calc(100%/3.0);
	top: calc(100%/25);
	left: calc(100%/30.0);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.ani-logo {
	width: calc(100%/1.6);
	top: calc(100%/10.0);
	left: calc(100%/30.0);
	animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.day {
	width: calc(100%/2.2);
	top: calc(100%/4.7);
	left: calc(100%/30.0);
	animation: fadeup 3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.text {
	width: calc(100%/1.9);
	top: calc(100%/3.3);
	left: calc(100%/30.0);
	animation: fadeup 4s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.image1 {
	width: calc(100%/4.0);
	top: calc(100%/1.6);
	left: calc(100%/25.0);
}
.image2 {
	width: calc(100%/4.0);
	top: calc(100%/1.6);
	left: calc(100%/3.2);
}
.image3 {
	width: calc(100%/4.5);
	top: calc(100%/22.0);
	left: calc(100%/1.35);
}
.link_other {
	width: calc(100%/2.8);
	top: calc(100%/1.15);
	left: calc(100%/1.6);
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@media screen and (max-width: 480px){
	.logo-sup {
		width: calc(100%/1.4);
		top: calc(100%/25);
		left: calc(100%/10.0);
		animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
	.ani-logo {
		width: calc(100%/1.3);
		top: calc(100%/6.0);
		left: calc(100%/10.0);
		animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
	.day {
		width: calc(100%/1.9);
		top: calc(100%/1.85);
		left: calc(100%/10.0);
		animation: fadeup 3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
	.image1 {
		width: calc(100%/4.0);
		top: calc(100%/1.54);
		left: calc(100%/25.0);
	}
	.image2 {
		width: calc(100%/4.0);
		top: calc(100%/1.54);
		left: calc(100%/3.2);
	}
	.image3 {
		width: calc(100%/4.0);
		top: calc(100%/1.45);
		left: calc(100%/1.5);
	}
}

@keyframes fadeup {
  0% {
	transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.main{
	font-size:1.1rem;
	color:#333;
	line-height:1.8;
	max-width:1200px;
	margin: 20px auto;
}
.catch{
	text-align:center;
}
.catch p{
	display:inline-block;
	text-align:left;
	font-weight:600;
	padding:15px;
	margin: 20px auto;
	border-top:3px dotted #333;
	border-bottom:3px dotted #333;
}
.artist{
	margin:0 auto;
	padding:20px;
	background:#fff;
}
.artist .message{
	padding:30px;
	background:#ede4da;
}
.artist .message h3{
	margin-bottom:20px;
}
.artist .flex-wrap{
	justify-content:center;
	align-items:center;
	padding:20px 0;
}
.artist .flex-wrap .flex-box p{
	line-height:2.0;
}

.link-more a{
	font-size:1.2rem;
}
.link-more a:before{
	content:url(../img/arrow.png);
	margin-right:5px;
}
.artist-footer{
	max-width:1200px;;
	margin:0 auto;
	padding:30px 10px;
}
.artist-footer p{
	font-size:1.2rem;
	font-weight:600;
	line-height:1.8;
	text-align:center;
}
@media screen and (max-width: 480px){
	.artist{
		padding:20px 10px;
	}
	.artist .flex-wrap{
		display:block;
	}
	.artist .message{
		padding:30px 10px;
	}
	.artist-footer p{
		font-size:1.1rem;
		text-align:left;
	}
}