@charset "UTF-8";

/***************************************
01.Reset
02.共通
　ーヘッダー
　ーパンくず
　ーフッター
03.トップページ
04.
05.

***************************************/
/***************************************
01.Reset
***************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

:root {
	--bg-color: #000;
	--w-bg-color:#FFFFFA;
	--b-text-color: #333333;
	--text-color: #fff;
	--accent-color:#105058;
	--form-bg-color:#F0F0F0;
	--nav-bg-color:#003346;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	/*overflow-x: hidden;*/
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/***************************************
02.共通
***************************************/
body {
	font-size: 14px;
	color: var(--b-text-color);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	text-align: justify;
	-webkit-text-size-adjust: 100%;
	background:#3d88a1;
	overflow-x: hidden;
}
/*body:after{
	position:fixed;
	display: block;
    top:0;
    left:0;
    z-index:-1;
    width:100vw;
    height:100vh;
	background:url(../img/back_sp.webp?0000) no-repeat center top/cover;
	-webkit-background-size: cover;
	content:"";
}
@media screen and (min-width:768px) {
	body{
		font-size: 16px;
		background-attachment: fixed;
	}
	body:after{
		background:url(../img/back_pc.webp) no-repeat center top/cover;
		height: 100%;
	}
}
*/
#mv{
	z-index: -2;
}
.mv-img-wrapper{
	z-index: -2;
}
div.contents{
	position: relative;
}
div.contents::after{
	position:fixed;
	display: block;
    bottom:0;
    left:0;
    width:100vw;
    height:100vh;
	background:url(../img/back_sp.webp?) no-repeat center top/cover;
	-webkit-background-size: cover;
	content:"";
	z-index: -1;
	opacity: 0;
}
div.contents.active::after{
	animation-name:fiAnime;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}
@keyframes fiAnime{
	from {
	  opacity: 0;
	}

	to {
	  opacity: 1;
	}
}
@media screen and (min-width:1025px) {
	div.contents{
		background:url(../img/back_pc.webp) no-repeat center top/cover;
		background-attachment: fixed;
	}
	div.contents:after{
		/*background:url(../img/back_pc.webp) no-repeat center top/cover;
		height: 100%;*/
		display: none;
	}
}

h1, h2, h3, h4, h5, h6 {
}
a {
	color: var(--b-text-color);
	word-break: break-all;
	text-decoration: none;
}

img {
	width: 100%;
	max-width: 100%;
	vertical-align: middle;
}
small{
	font-size: 0.9rem;
	font-weight: 500;
}
strong{
	font-weight: 700;
}

section {
	padding: 40px 0px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow-y:visible;
}
section .inner p{
	line-height: 2em;
	position: relative;
	z-index: 10;
}
section h2 {
	margin: 40px auto 40px auto;
	font-size: 50px;
	text-align: center;
	font-weight: 700;
	transform: skewX(-5deg)skewY(-5deg);
}
section .inner{
	padding: 0 25px;
}
br.pc_only{
	display: none;
}
@media screen and (min-width:768px) {
	section {
		width: 100%;
		padding: 80px 0;
	}
	section .inner{
		padding: 0 25px;
		max-width: 1140px;
		margin: auto;
	}
	section h2 {
		font-size: 56px;
	}
	br.sp_only{
		display: none;
	}
	.flex{
		display: flex;
		flex-wrap: wrap;
	}
	br.pc_only{
		display: inline;
	}
}


a.bt{
	background: var(--bg-color);
	color:var(--w-bg-color);
	display: inline-block;
	padding: 12px 30px;
	border-radius: 30px;
	font-size: 18px;
    transition: 0.5s ease-in-out;
    border: 2px solid var(--bg-color);
}
a.bt:hover{
	color: var(--bg-color);
    background: white;
    border: 2px solid var(--bg-color);
    transition: 0.5s ease-in-out;
}
img.image{
	display: block;
	margin: 20px auto;
	border-radius: 20px;
}
img.circle{
	border-radius: 50%;
	border: 10px solid white;
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width:768px) {
	a.bt{
		font-size: 24px;
		padding: 20px 40px;
		border-radius: 60px;
	}
	img.circle{
		border:20px solid white;
	}
}
@media screen and (min-width:1160px) {
	a.bt{
		font-size: 32px;
		padding: 20px 40px;
		border-radius: 60px;
	}
}

a[href^="tel:"]{
	color: var(--text-color);
}

/*------------ヘッダー-（ナビゲーション・ロゴ）----------------*/

/*ナビゲーション*/

	header{
	}
	#top-head {
		position: fixed;
		display: inline-block;
		width: 0%;
		z-index: 100;
	}
	.header-info, .header-nav-list a span {
		display: none;
	}
	.header-inner {
		padding: 5px 15px 15px;
		z-index: 100;
		width: 0%;
		position: relative;
	}
	.header-nav {
		width: 100%;
		margin: 0;
		padding: 30px;
		padding-top: 30px;
		background: var(--nav-bg-color);
		z-index: 90;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		position: fixed;
	}

	header nav {
		position: fixed;
		top: 0px;
		width: 100%;
		height: 100%;
		opacity: 0;
		transform: translateX(100%);
		transition: .5s;
	}
	header.open nav{
		transform: translateX(0);
		opacity: 1;
		transition: .5s;
	}
	@media screen and (min-width:768px) {
		.header-nav {
			max-width: 33%;
		}
	}

	.header-nav:after{
		content: "";
		background: url(../img/hush_w.svg) no-repeat right bottom/30%;
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: -5px;
		right: -5px;
		opacity: 0.3;
	}
	.header-nav .logo{
		width: 40%;
	}
	.header-nav-list {
		z-index: 100;
	}
	.header-nav-list li{
		padding: 10px 0;
	}
	.header-nav-list li a span{
		display: inline-block;
		transform: rotate(-5deg);
		border-bottom: 1px solid var(--text-color);
	}
	@media screen and (min-width:768px) {
		.header-nav-list li{
			padding: 15px 0;
		}
	}


	.sp_header {
		display: flex;
	}

		/*ヘッダー*/
		header {
			height: 60px;
		}
	header nav ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		height: 60vh;
	}

    header nav ul li a {
		padding: 16px;
    }
	header nav ul a {
		font-weight: bold;
		color: var(--text-color);
	}
	header nav ul{
		margin: 0 auto;
		width: 100%;
		padding-left: 0;
	}
	header nav ul li{
		width: 95%;
		margin: 0 auto;
		text-align: right;
	}
	header nav ul li a{
		display: block;
	}
	header nav ul a:hover::after {
		display: none;
	}
	header nav .bt-area{
		text-align: right;
		position: absolute;
		bottom: 10%;
		right: 20px;
	}
	header nav .bt-area a.bt{
		background: var(--text-color);
		color: var(--b-text-color);
		font-size: 20px;
		padding: 15px 30px;
		z-index: 1000;
    	position: relative;
	}
	header nav .career{
		width: 50%;
		position: absolute;
		bottom: 30px;
		left: 20px;
	}
	@media screen and (min-width:768px) {
		.header nav ul {
			padding-top: 40px;
		}
		header nav .bt-area{
			bottom: 5vh;
		}
	}

      /*開閉ボタン*/
	#nav_toggle{
		display: block;
		width: 34px;
		height: 30px;
		position: fixed;
		top: 30px;
		z-index: 100;
		right: 10px;
	}
	#nav_toggle div {
		position: relative;
		transform: skewX(-15deg);
	}
	#nav_toggle span{
		display: block;
		height: 6px;
		background: var(--text-color);
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: transform 0.5s ease-in-out;
		-moz-transition: transform 0.5s ease-in-out;
		transition: transform 0.5s ease-in-out;

		box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.5);
	}
	#nav_toggle.dark span{
		background: var(--b-text-color);
	}

	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:12px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}

	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
		top: 12px;
		height: 1px;
	   -webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
		background: var(--text-color);
	}
	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
		background: var(--text-color);
	}
	.open #nav_toggle span:nth-child(3) {
		top: 12px;
		height: 1px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
		background: var(--text-color);
	}

	@media screen and (min-width:768px) {
		#nav_toggle{
			width: 50px;
			height: 50px;
		}
		#nav_toggle span:nth-child(1){
			top:0px;
		}
		#nav_toggle span:nth-child(2){
			top:15px;
		}
		#nav_toggle span:nth-child(3){
			top:30px;
		}
	}

	.header-nav > ul > li a {
		display: block;
		position: relative;
		text-decoration: none;
		padding: 10px 0px;
		font-size: 30px;
		font-weight: bold;
		z-index: 2;
	}
	header nav ul a:hover {
		text-decoration: none;
		color: #fff;
	}


/*------------共通-----------------*/
.contents {
	position: relative;
	margin: 0 auto;
	overflow-x: hidden;
}
p.lead{
	font-size: 16px;
	text-align: center;
}
p.notice{
	text-align: center;
	font-size: 12px;
}

.bt-area{
	padding: 20px 0px;
	text-align: center;
	max-width: 395px;
	margin: auto;
	position: relative;
	z-index: 50;
}
.bt-area.big a.bt{
	font-size: 32px;
	padding: 20px;
	display: block;
	border-radius: 50px;
}

@media screen and (min-width:768px) {
	.bt-area{
		max-width: none;
		padding: 40px 0;
	}
	p.lead{
		font-size: 24px;
	}
	p.notice{
		font-size: 18px;
	}
	.bt-area.big a.bt{
		max-width: 440px;
		margin: auto;
		padding: 30px 0;
		border-radius: 80px;
		font-size: 40px;
	}
}
@media screen and (min-width:1160px) {
	.bt-area{
		padding: 80px 0;
	}
}


/***************************************
03.ローディング
***************************************/
#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
	background: url(../img/back_pc.webp) no-repeat center center/cover;
	color: white;
    transition: all 1s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
	font-size: 20px;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}

/***************************************
03.メインビジュアル
***************************************/


/***************************************
introduction
***************************************/

#intro{
	border-radius: 40px 40px 0 0;
	position: relative;
	background: var(--w-bg-color);
	padding-bottom: 10px;
}
#intro::before{
	content: "";
	width: 100%;
	height: 100%;
	background:url(../img/hush_b.svg) no-repeat right top/40%;
	opacity: 0.2;
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 0;
}
#intro h2{
	font-size: 30px;
	line-height: 2em;
	text-align: left;
	transform: none;
}
#intro p.lead{
	text-align: left;
}


@media screen and (min-width:768px) {
	#intro{
		padding-bottom: 100px;
		margin-bottom: 0;
		max-width: 1140px;
		border-radius: 20px;
	}
	#intro .inner{
		max-width: 90%;
	}
	#intro::before{
		background-size: 20%;
	}
	#intro h2{
		font-size: 44px;
	}
	#intro h2 br{
		display: none;
	}
	#intro p.lead{
		font-size: 22px;
	}
	#intro .flex{
		flex-direction: column;
	}
	#intro .flex img.image{
		width: 60%;
		margin-top: 50px;
	}
	#intro  .bt-area{
		padding: 80px 0 0 0 ;
	}
}
@media screen and (min-width:1100px) {
	#intro .flex{
		flex-direction: row;
		align-items: flex-end;
		position: relative;
	}
	#intro .flex img.image{
		width: 40%;
		position: absolute;
		top: 0;
		right: 0;
	}
}


/***************************************
プログラム
***************************************/

#program{
	padding: 0px 10px 50px 10px;
	position: relative;
}
#program:before{
	content: "";
	width: 100%;
	height: 70px;
	background: var(--w-bg-color);
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
}
#program h2{
	letter-spacing: -0.1em;
}
#program .inner{
	padding: 30px 0 0 0;
	position: relative;
	color: var(--b-text-color);
}
#program .inner:before{
	content: "";
	display: block;
	position: absolute;
	width: 94%;
	height: 100%;
	border: 3px solid var(--b-text-color);
	background: var(--w-bg-color);
	border-radius: 20px 20px 20px 20px;
	left: 50%;
	transform: translateX(-50%);
}
#program p.lead{
	padding-bottom: 2em;
}
#program .inner > .program{
	padding: 30px 28px 30px 150px;
	border-radius: 20px;
	border: 3px solid var(--b-text-color);
	color: var(--b-text-color);
	position: relative;
	background: var(--text-color);
	margin-bottom: 50px;
	font-size: 12px;
}
#program .inner > .program:last-of-type{
	margin-bottom: 20px;
}
#program .inner > .program img.circle{
	width: 208px;
	height: 208px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -70px;
}
#program .inner > .program > span{
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28px;
	font-weight: 700;
	border-radius: 50%;
	border: 3px solid var(--b-text-color);
	position: absolute;
	top: -30px;
	right: -15px;
	line-height: 1em;
	background: var(--text-color);
}
#program .inner > .program h3{
	font-size: 24px;
	font-weight: 700;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
#program .inner > .program h3:after{
	content: "";
	display: block;
	width: 70px;
	height: 3px;
	background: var(--bg-color);
	position: absolute;
	bottom: 0;
	left: 0;
}
#program .inner > .program p{
}


@media screen and (min-width:768px) {
	#program {
		margin-top: 60px;
	}
	#program p.lead br{
		display: none;
	}
	#program .inner {
		padding: 30px 60px 50px 10px;
	}
	#program:before{
		height: 180px;
		display: none;
	}
	#program .inner:before{
		width: 100%;
	}
	#program .inner > .program{
		font-size: 18px;
		padding: 60px 60px 60px 300px;
		margin: 80px 0;
	}
	#program .inner > .program:last-of-type{
		margin-bottom: 40px;
	}
	#program .inner > .program img.circle{
		width: 332px;
		height: 332px;
		left: -100px;
	}
	#program .inner > .program h3{
		font-size: 36px;
		padding-bottom: 30px;
		margin-bottom: 20px;
	}
	#program .inner > .program h3 br{
		display: none;
	}
	#program .inner > .program h3:after{
		width: 120px;
	}
	#program .inner > .program p{
		line-height: 1.6em;
	}
	#program p.lead{
		padding-bottom: 0em;
	}
	#program .inner > .program > span{
		width: 82px;
		height: 82px;
		font-size: 38px;
	}

}

/***************************************
募集要項
***************************************/
#requirement{
	padding:40px 15px;
}
#requirement .inner{
	border: 3px solid var(--b-text-color);
	border-radius: 20px ;
	padding: 30px 5px 30px 5px;
	font-size: 16px;
	background: var(--w-bg-color);
	text-align: center;
}
#requirement > .block{
	padding-bottom: 20px;
	text-align: center;
}
#requirement h3{
	width: 185px;
	font-size: 18px;
	padding: 10px 20px;
	text-align: center;
	margin: 20px auto;
	border: 2px solid var(--bg-color);
	background: var(--text-color);
	border-radius: 40px;
}
#requirement h4{
	font-size: 24px;
	margin-bottom: 40px;
	position: relative;
}
#requirement h4::after{
	content: "";
	width: 40px;
	height: 3px;
	position: absolute;
	background: var(--b-text-color);
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}
.schedule-wrap{
	padding: 30px 0 0 0;
	border-radius: 20px;
	background: white;
	border: 1px solid var(--b-text-color);
	position: relative;
	width: 90%;
	margin: 0 auto 20px auto;
}

#requirement p{
	text-align: center;
	padding-bottom: 1em;
}
#requirement dl{
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#requirement dl dt{
	padding-bottom: 5px;
	line-height: 1.6em;
}
#requirement dl dd > div > span{
	border-bottom: 1px solid var(--b-text-color);
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.6em;
}
#requirement dl dd > div:last-of-type{
	border: none;
}
#requirement p.notice{
	text-align: left;
	line-height: 1.4em;
	padding: 0 20px;
}

@media screen and (min-width:768px) {
	#requirement{
		padding:100px 0 0 0;
	}
	#requirement h3{
		width: 360px;
        font-size: 28px;
        padding: 16px 20px;
		margin: 40px auto;
		border-radius: 80px;
	}
	#requirement h4{
		font-size: 32px;
		margin-bottom: 50px;
	}
	#requirement h4::after{
		bottom: -20px;
		width: 40px;
	}
	.schedule-wrap{
		padding: 60px 0 0 0;
		width: 80%;
		margin: 0 auto 80px auto;
		border-radius: 30px;
	}
	
	#requirement p{
		font-size: 22px;
	}
	#requirement dl{
		display: block;
		padding-top: 30px;
		font-size: 22px;
	}
	#requirement dl dt{
		padding-bottom: 15px;
	}
	#requirement p.notice{
		font-size: 18px;
		text-align: center;
		letter-spacing: -0.02em;
		padding-top: 50px;
		line-height: 1.8em;
	}
	#requirement dl dd > div > span{
		padding-top: 0;
	}
}


/***************************************
参加者の声
***************************************/
#voice{
	padding-top: 0;
}
#voice .inner{
	padding: 0;
}
#voice h2{
	color: var(--w-bg-color);
	font-size: 40px;
}
.voice-block {
	/* overflow: hidden; */
	padding-bottom: 50px;
	margin-bottom: 50px;
	position: relative;
	height: 314px;
}
@media screen and (min-width:768px) {
	#voice{
		padding-bottom: 0;
	}
	#voice h2{
		font-size: 56px;
	}
	.voice-block {
		overflow:visible;
		width: 100%;
	}
	#voice .flex{
		justify-content: center;
	}
}
@media screen and (min-width:900px) {
	.voice-block {
		overflow:visible;
		width: 48%;
	}
}
.voice-block .fukidashi{
	padding: 40px;
	display: flex;
	justify-content: center;
	align-items:flex-start;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	font-size: 14px;
}
.voice-block .fukidashi p{
	width: 345px;
	line-height: 1.8em;
}
.voice-block.voice1{
	height: 355px;
}
.voice-block.voice1 .fukidashi{
	background: url(../img/fukidashi1.png) no-repeat center center/100%;
	width: 544px;
	height: 314px;
	padding-top: 70px;
}
.voice-block.voice2{
	height: 265px;
}
.voice-block.voice2 .fukidashi{
	background: url(../img/fukidashi2.png) no-repeat center center/100%;
	width: 448px;
	height: 258px;
	padding-top: 70px;
}
.voice-block.voice3{
	height: 185px;
}
.voice-block.voice3 .fukidashi{
	background: url(../img/fukidashi3.png) no-repeat center center/100%;
	width: 434px;
	height: 183px;
}
.voice-block.voice4{
	height:256px;
	margin-bottom: 0;
}
.voice-block.voice4 .fukidashi{
	background: url(../img/fukidashi4.png) no-repeat center center/100%;
	width: 433px;
	height: 210px;
}
.voice-block div.name{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 55%;
}
.voice-block div.name p{
	padding: 10px 80px 10px 0px;
	width: 100%;
	background: var(--bg-color);
	color: var(--text-color);
	font-size: 14px;
	text-align: center;
}
.voice-block div.name img{
	position: absolute;
	bottom: 0;
	right: 10px;
}
.voice-block.voice1 .voice-animation img{
	width: 91px;
	height: 137px;
}
.voice-block.voice2 .voice-animation img{
	width: 92px;
	height: 135px;
}
.voice-block.voice3 .voice-animation img{
	width: 91px;
	height: 137px;
}
.voice-block.voice4 .voice-animation img{
	width: 91px;
	height: 137px;
}

@media screen and (min-width:900px) {
	.voice-block .fukidashi{
		font-size: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.voice-block .fukidashi p{
		width: 90%;
	}
	.voice-block.voice1{
		height: 495px;
	}
	.voice-block.voice1 .fukidashi{
		width: 600px;
        height: 342px;
		padding-top: 20px;
	}
	.voice-block.voice1 .fukidashi p{
		padding-top: 20px;
	}
	.voice-block.voice2{
		height: 418px;
		margin-top: 140px;
		margin-bottom: 0;
	}
	.voice-block.voice2 .fukidashi{
		width: 524px;
        height: 290px;
		padding-top: 0px;
	}
	.voice-block.voice3{
		height:360px;
		margin-top: -40px;
	}
	.voice-block.voice3 .fukidashi{
		width: 558px;
        height: 235px;
	}
	.voice-block.voice4{
		height:370px;
		margin-bottom: 0;
		margin-top: 80px;
	}
	.voice-block.voice4 .fukidashi{
		width: 550px;
        height: 266px;
	}
	.voice-block.voice4 .fukidashi p{
		margin-top: -30px;
	}
	.voice-block div.name{
		width: 352px;
	}
	.voice-block div.name p{
		font-size: 18px;
		padding: 20px 180px 20px 20px;
		text-align: center;
		box-sizing: border-box;
	}
	.voice-block.voice1 .voice-animation img{
		width: 178px;
		height: 267px;
	}
	.voice-block.voice2 .voice-animation img{
		width: 182px;
		height: 267px;
	}
	.voice-block.voice3 .voice-animation img{
		width: 176px;
		height: 256px;
	}
	.voice-block.voice4 .voice-animation img{
		width: 157px;
		height: 236px;
		right: 30px;
	}
}

#voice {
	--axisX: 160px;
	--axisY: 120px;
}

@keyframes fukidashiFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fukidashiTopLeftWrapper {
	0% {
		transform: translateX(calc(-1 * var(--axisX)));
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes fukidashiTopLeft {
	0% {
		transform: translateY(calc(-1 * var(--axisY)));
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes fukidashiTopRightWrapper {
	0% {
		transform: translateX(var(--axisX));
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes fukidashiTopRight {
	0% {
		transform: translateY(calc(-1 * var(--axisY)));
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes fukidashiBottomLeftWrapper {
	0% {
		transform: translateX(calc(-1 * var(--axisX)));
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes fukidashiBottomLeft {
	0% {
		transform: translateY(var(--axisY));
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes fukidashiBottomRightWrapper {
	0% {
		transform: translateX(var(--axisX));
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes fukidashiBottomRight {
	0% {
		transform: translateY(var(--axisY));
	}
	100% {
		transform: translateY(0);
	}
}

.voice-animation--top-left {
	transform: translateX(calc(-1 * var(--axisX)));
	opacity: 0;
}
.animated .voice-animation--top-left {
	animation: fukidashiTopLeftWrapper .8s ease-out forwards, fukidashiFadeIn .4s ease-out forwards;
}
.voice-animation--top-left > * {
	transform: translateY(calc(-1 * var(--axisY)));
}
.animated .voice-animation--top-left > * {
		animation: fukidashiTopLeft .8s ease-in forwards, fukidashiFadeIn .4s ease-out forwards;
}

.voice-animation--top-right {
	transform: translateX(var(--axisX));
	opacity: 0;
}
.animated .voice-animation--top-right {
	animation: fukidashiTopRightWrapper .8s ease-out forwards, fukidashiFadeIn .4s ease-out forwards;
}
.voice-animation--top-right > * {
	transform: translateY(calc(-1 * var(--axisY)));
}
.animated .voice-animation--top-right > * {
		animation: fukidashiTopRight .8s ease-in forwards, fukidashiFadeIn .4s ease-out forwards;
}

.voice-animation--bottom-left {
	transform: translateX(calc(-1 * var(--axisX)));
	opacity: 0;
}
.animated .voice-animation--bottom-left {
	animation: fukidashiBottomLeftWrapper .8s ease-out forwards, fukidashiFadeIn .4s ease-out forwards;
}
.voice-animation--bottom-left > * {
	transform: translateY(calc(-1 * var(--axisY)));
}
.animated .voice-animation--bottom-left > * {
		animation: fukidashiBottomLeft .8s ease-in forwards, fukidashiFadeIn .4s ease-out forwards;
}

.voice-animation--bottom-right {
	transform: translateX(var(--axisX));
	opacity: 0;
}
.animated .voice-animation--bottom-right {
	animation: fukidashiBottomRightWrapper .8s ease-out forwards, fukidashiFadeIn .4s ease-out forwards;
}
.voice-animation--bottom-right > * {
	transform: translateY(calc(-1 * var(--axisY)));
}
.animated .voice-animation--bottom-right > * {
	animation: fukidashiBottomRight .8s ease-in forwards, fukidashiFadeIn .4s ease-out forwards;
}
.voice-animation--fadeIn {
	opacity: 0;
}
.animated .voice-animation--fadeIn {
	animation: fukidashiFadeIn .4s ease-out forwards;
}




/***************************************
参加企業
***************************************/
#graph{
	color: var(--w-bg-color);
}

#graph .graph-block{
	position: relative;
	margin-top: 70px;
}
#graph .graph-block .circle-title{
	position: absolute;
	top: -20px;
	left: 30px;
	width: 168px;
    height: 168px;
	text-indent: -9999px;
}
#graph .graph-block.graph1 .circle-title{
	background: url(../img/circle-title1.png) no-repeat center center/100%;
}
#graph .graph-block.graph2 .circle-title{
	background: url(../img/circle-title2.png) no-repeat center center/100%;
}
#graph .graph-block.graph3 .circle-title{
	background: url(../img/circle-title3.png) no-repeat center center/100%;
}
#graph .graph-block .graph-bar{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transform: scaleY(0);
	transform-origin: center bottom;
	transition: transform 1s cubic-bezier(.22,.61,.36,1);
}
#graph .graph-block .graph-bar.animated{
	transform: scaleY(1);
}

@media screen and (min-width:768px) {
	#graph .flex{
		justify-content: space-between;
	}
	#graph .graph-block{
		width: 30%;
	}
	#graph .graph-block .circle-title{
		left: 40px;
		width: 128px;
		height: 128px;
	}
}

@media screen and (min-width:1220px) {
	#graph .graph-block .circle-title{
		left: 25px;
        width: 160px;
		height: 160px;
	}
}

/***************************************
ニュース
***************************************/
#news{
	background: var(--text-color);
}
#news h2{
	margin-top: 0;
	letter-spacing: -0.1em;
}
#news ul li a{
	display: block;
	padding: 20px 20px 20px 0;
	margin-bottom: 10px;
	font-size: 12px;
	position: relative;
	border-bottom: 1px solid var(--b-text-color);
}
#news ul li a.nolink{
	pointer-events: none;
}
#news ul li a p.title::after{
	content: "＞";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -20px;
}
#news ul li a.nolink p.title::after{
	display: none;
}
#news ul li a div.time{
	display: flex;
	align-items: center;
	padding-bottom: 10px;
}
#news ul li a div.time span.new{
	color: #FF4848;
	display: inline-block;
	padding: 0 0 0 10px;
}
#news ul li a div.time:after{
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	margin-left: 1em;
	background: url(../img/link.svg) no-repeat center center/100%;
}

#news ul li a.nolink div.time:after{
	display: none;
}

@media screen and (min-width:768px) {
	#news {
		margin: 0;
		padding: 100px 0 150px 0;
	}
	#news ul li a{
		display: flex;
		font-size: 18px;
	}
	#news ul li a div.time{
		width: 30%;
	}
	#news ul li a p.title{
		width: 70%;
	}
	#news ul li a::after{
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);
	}
}

/***************************************
企業の方へ
***************************************/
#for-company{
	background: var(--accent-color);
	padding: 40px 0 60px 0;
}
#for-company .inner{
	padding: 0;
}
.building-wrap{
	height: 810px;
}
.building-img{
	position: relative;
	z-index: 0;
	margin-top: -20px;
}

@keyframes buildingUp1 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -200px;
	}
}
@keyframes buildingUp2 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -160px;
	}
}
@keyframes buildingUp3 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -156px;
	}
}
@keyframes buildingUp4 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -200px;
	}
}
@keyframes buildingUp5 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -140px;
	}
}
@keyframes buildingUp6 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -120px;
	}
}
@keyframes buildingUp7 {
	0% {
		bottom: -300px;
	}
	100% {
		bottom: -140px;
	}
}
.building-img img{
	display: block;
	position: absolute;
	bottom: -110px;
}
.building-img img.b3{
	width: 15px;
	height: 84px;
	left: 10%;
	bottom: -300px;
	transform: rotate(-34deg);
}
.building-img img.b2{
	width: 73px;
	height: 193px;
	left: 12%;

	bottom: -300px;
	transform: rotate(-14deg);
}
.building-img img.b5{
	width: 45px;
	height: 121px;
	left: 32%;
	bottom: -300px;
	transform: rotate(-8deg);
}
.building-img img.b6{
	width: 60px;
	height: 172px;
	left: 42%;
	bottom: -300px;
}
.building-img img.b7{
	width: 42px;
	height: 114px;
	left: 58%;
	bottom: -300px;
	transform: rotate(7deg);
}
.building-img img.b1{
	width: 83px;
	height: 203px;
	left: 65%;

	bottom: -300px;
	transform: rotate(14deg);
}
.building-img img.b4{
	width: 43px;
	height: 126px;
	left: 80%;

	bottom: -300px;
	transform: rotate(29deg);
}
.building-img img.animated.b1{
	animation: buildingUp1 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .1s;
}
.building-img img.animated.b2{
	animation: buildingUp2 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .2s;
}
.building-img img.animated.b3{
	animation: buildingUp3 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .3s;
}
.building-img img.animated.b4{
	animation: buildingUp4 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .4s;
}
.building-img img.animated.b5{
	animation: buildingUp5 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .5s;
}
.building-img img.animated.b6{
	animation: buildingUp6 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .6s;
}
.building-img img.animated.b7{
	animation: buildingUp7 .8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: .7s;
}

@media screen and (min-width:768px) {
	#for-company{
		margin: 0;
		padding: 200px 0 100px 0;
	}
	.building-img{
		max-width: 945px;
		margin: auto;
		margin-top:30px;
	}
	.building-img img.b3{
		width: 40px;
		height: 227px;
		left: 10%;
		bottom: -300px;
		transform: rotate(-34deg);
	}
	.building-img img.b2{
		width: 196px;
		height: 517px;
		left: 12%;
		bottom: -300px;
		transform: rotate(-14deg);
	}
	.building-img img.b5{
		width: 119px;
		height: 324px;
		left: 32%;
		bottom: -300px;
		transform: rotate(-8deg);
	}
	.building-img img.b6{
		width: 160.5px;
		height: 463px;
		left: 42%;
		bottom: -300px;
	}
	.building-img img.b7{
		width: 112px;
		height: 304px;
		left: 58%;
		bottom: -300px;
		transform: rotate(7deg);
	}
	.building-img img.b1{
		width: 222px;
		height: 543px;
		left: 65%;
		bottom: -300px;
		transform: rotate(14deg);
	}
	.building-img img.b4{
		width: 115px;
		height: 337px;
		left: 80%;
		bottom: -300px;
		transform: rotate(29deg);
	}
}


#for-company .building{
	width: 620px;
	height: 620px;
	position: absolute;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--accent-color);
}
#for-company .building > div{
	background: var(--w-bg-color);
	width: 620px;
	height: 620px;
	position: relative;
	border-radius: 50%;
	z-index: 10;
}
#for-company .building > div >div{
	background: var(--w-bg-color);
	width: 620px;
	height: 620px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 50%;
	z-index: 10;
}
#for-company h2{
	transform: skew(0);
	font-size: 34px;
}
#for-company .building p.lead{
	text-align: center;
	font-size: 18px;
}
#for-company .building:before,
#for-company .building:after,
#for-company .building > div::before{
	content: "";
	width: 620px;
	height: 620px;
	background: transparent;
	border: 1px solid var(--w-bg-color);
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: 0;
	visibility: hidden;
}
@keyframes circleDown1 {
	0% {
		top: 0;
	}
	100% {
		top: 40px;
	}
}
@keyframes circleDown2 {
	0% {
		top: 0;
	}
	100% {
		top: 80px;
	}
}
@keyframes circleDown3 {
	0% {
		top: 0;
	}
	100% {
		top: 120px;
	}
}

@keyframes circleDownPC {
	0% {
		width: 1200px;
		height: 1200px;
	}
	100% {
		width: '';
		height: '';
	}
}

#for-company .building.animated::before {
	visibility: visible;
	animation: circleDown1 .4s ease-out forwards;
}
#for-company .building.animated::after {
	visibility: visible;
	animation: circleDown2 .8s ease-out forwards;
}
#for-company .building.animated>div::before {
	visibility: visible;
	animation: circleDown3 1.2s ease-out forwards;
}

@media screen and (min-width:768px) {
	#for-company .building{
		width: 1140px;
		height: 1140px;
		position: absolute;
		top: 180px;
		left: 50%;
		transform: translateX(-50%);
		color: var(--accent-color);
	}
	#for-company .building > div{
		background: var(--w-bg-color);
		width: 1140px;
		height: 1140px;
		position: relative;
		border-radius: 50%;
		z-index: 10;
	}
	#for-company .building > div >div{
		background: var(--w-bg-color);
		width: 1140px;
		height: 1140px;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 50%;
		z-index: 10;
	}
	#for-company .building:before,
	#for-company .building:after,
	#for-company .building > div::before{
		content: "";
		width: 1200px;
		height: 1200px;
	}
	#for-company .building:after{
		width: 1300px;
		height: 1300px;
	}
	#for-company .building > div::before{
		width:1400px;
		height:1400px;
	}

	#for-company h2{
		font-size: 56px;
		line-height: 2em;
		margin-bottom: 70px;
	}
	#for-company .building p.lead{
		text-align: center;
		font-size: 28px;
	}
	.building-wrap {
		height: 1200px;
	}

	#for-company .building.animated::before {
		visibility: visible;
		animation: circleDownPC .4s ease-out forwards;
	}
	#for-company .building.animated::after {
		visibility: visible;
		animation: circleDownPC .8s ease-out forwards;
	}
	#for-company .building.animated>div::before {
		visibility: visible;
		animation: circleDownPC 1.2s ease-out forwards;
	}
}


#for-company .service{
	border: 3px solid var(--bg-color);
	padding: 40px;
	position: relative;
	margin-bottom: 30px;
	color: var(--accent-color);
	background: var(--w-bg-color);
}
#for-company .service span{
	display:flex;
	justify-content: center;
	align-items: center;
	font-size: 32px;
	color: var(--text-color);
	background: var(--accent-color);
	border: 3px solid var(--text-color);
	position: absolute;
	top: -30px;
	padding: 20px;
	width: 56px;
	height: 56px;
	left: 50%;
	transform: translateX(-50%);
}
#for-company .service p{
	padding: 0;
	font-size: 24px;
	text-align: center;
	line-height: 1.6em;
}
#for-company .exp{
	padding: 0 25px;
	padding-bottom: 40px;
	color: var(--text-color);
}
#for-company .exp p{
	font-size: 15px;
}
#for-company .exp img.image{
	margin-top: 20px;
}
.company-voice{
	padding: 0 25px;
}
.company-voice h2{
	color: var(--w-bg-color);
}
.company-voice-block{
	border-radius: 20px;
	background: var(--w-bg-color);
	padding: 30px 20px 40px 20px;
	position: relative;
	margin-bottom: 50px;
	font-size: 14px;
	color: var(--accent-color);
	border: 3px solid var(--bg-color);
}
section .inner .company-voice-block p{
	line-height: 1.8em;

}
.company-voice-block .detail{
	position: absolute;
	color: var(--text-color);
	background: var(--accent-color);
	border: 3px solid var(--text-color);
	width: 192px;
	padding: 10px 20px;
	text-align: center;
	font-size: 14px;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
}
#for-company .bt-area.big a.bt{
	font-size: 28px;
}

#for-company p.notice{
	color: var(--text-color);
}


@media screen and (min-width:768px) {
	#for-company .flex.service-wrap{
		display: flex;
		justify-content: space-between;
	}
	#for-company .service{
		width: 48%;
		padding: 80px 60px;
	}
	#for-company .service p{
		font-size: 32px;
	}
	#for-company .service span{
		font-size: 48px;
		width: 107px;
		height: 107px;
		top: -54px;
	}
	#for-company .exp > .flex{
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		padding: 50px 0;
	}
	#for-company .exp p{
		font-size: 18px;
		text-align: center;
	}
	#for-company .exp > .flex p{
		width: 50%;
		font-size: 18px;
		text-align: left;
	}
	#for-company .exp > .flex p br{
		display: none;
	}
	#for-company .exp > .flex img{
		width: 40%;
		margin: 0;
	}
	.company-voice {
		padding: 80px 0;
	}
	#for-company .company-voice h2{
		margin-bottom: 50px;
	}
	.company-voice .flex{
		justify-content: space-between;
	}
	.company-voice .flex .company-voice-block{
		width: 100%;
		display: flex;
		font-size: 18px;
		padding: 40px 40px 80px 40px;
	}
	.company-voice .flex .company-voice-block br{
		display: none;
	}
	.company-voice-block .detail{
		width: 80%;
    	padding: 2dvb 20px;
		font-size: 22px;
	}
	#for-company .bt-area{
		padding: 40px 0 0 0;
	}
	#for-company p.notice{
		padding-top: 30px;
	}
}
@media screen and (min-width:1024px) {
	.company-voice .flex .company-voice-block{
		width: 30%;
		display: flex;
		font-size: 18px;
		padding: 40px 40px 80px 40px;
	}
}

/***************************************
ギャラリー
***************************************/

#gallery{
	max-width: none;
	position: relative;
}
#gallery::after{
	position: fixed;
    display: block;
    top:50%;
	transform: translateY(-50%);
    left: 0;
    width: 100vw;
    height: 110%;
    background: url(../img/back_sp.webp?) no-repeat center top / cover;
    -webkit-background-size: cover;
    content: "";
    z-index: -1;
    opacity: 0;
}
@media screen and (min-width:1025px) {
	#gallery{
		background:url(../img/back_pc.webp) no-repeat center top/cover;
		background-attachment: fixed;
	}
	#gallery::after{
		display: none;
	}
}

.gallery_slide{
	padding: 0 0 30px 0;
}
.movie-wrap{
	padding: 40px 0 20px 0;
}

.slider{
    overflow-x: hidden;
}

.slick-slide{
    text-align: center;
	margin: 0 15px;
	padding: 20px 0;
}
ul.movie,
ul.gallery{
	opacity: 0;
  	transition: opacity .3s linear;
}
ul.movie{
	height: 480px;
}
ul.movie.slick-initialized,
ul.gallery.slick-initialized{
	opacity: 1;
}
ul.movie .slick-current,
ul.gallery .slick-current{
	overflow: visible;
	z-index: 40;
}
ul.gallery li:after{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background: var(--bg-color);
}
ul.movie li iframe,
ul.gallery li img{
	height: auto;
	display: inline-block;
	opacity: 0.7;
}
ul.movie li{
	position: relative;
}
ul.movie li p{
	width: 208px;
	margin: auto;
	padding-top: 0px;
	font-size: 20px;
	color: white;
	line-height: 1.2em;
	display: none;
}
ul.movie li p small{
	font-size: 16px;
}
ul.movie .slick-current p{
	transform: scale(1.10);
	padding-top: 10px;
	display: block;
}
ul.movie li iframe{
	width: 208px;
	height:370px;
	position: relative;
	display: block;
	margin: auto;
	margin-bottom: 20px;
}
ul.movie li div.iframe{
	position: relative;
}
ul.movie li div.iframe::before,
ul.movie li div.iframe::after{
	content: "";
	display: block;
	width:40%;
	height: 80%;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 50;
}
ul.movie li div.iframe::before{
	right: auto;
	left: 0;
}
ul.movie .slick-current div.iframe::before,
ul.movie .slick-current div.iframe::after{
	height: 100%;
	bottom: -5%;
}

ul.movie .slick-current iframe,
ul.gallery .slick-current img{
    transform: scale(1.10);
	opacity: 1;
}
.movie-theme{
	padding: 0px 0 0 0;
	color: white;
	margin: 0 15px;
	font-size: 16px;
	text-align: center;
}
section .inner .movie-theme p{
	line-height: 1.6em;
}
.movie-theme div.title{
	font-size: 28px;
	margin-bottom: 40px;
}
.movie-theme a.bt{
	font-size: 16px;
}
@media screen and (min-width:768px) {
	ul.movie li iframe{
		width: 208px;
		height:370px;
	}
	.movie-theme{
		padding: 0px 0 0 0;
		margin: 0;
		text-align: center;
		font-size: 20px;
	}
	section .inner .movie-theme p{
		line-height: 1.6em;
	}
	.movie-theme div.title{
		font-size: 40px;
		margin-bottom: 60px;
	}
	.movie-theme p br.sp_only{
		display: inline;
	}
	.movie-theme p br.pc_only{
		display: none;
	}
	.movie-theme a.bt{
		font-size: 20px;
	}
}
@media screen and (min-width:900px) {
	ul.movie{
		height: 684px;
	}
	ul.movie li iframe{
		width: 300px;
		height:533px;
	}
	ul.movie li p{
		width: 300px;
		font-size: 26px;
	}
	ul.movie li p small{
		font-size: 20px;
	}
	ul.movie .slick-current p{
		padding-top: 20px;
	}
	.movie-theme a.bt{
		font-size: 24px;
	}

	.movie-theme p br.sp_only{
		display: none;
	}
	.movie-theme p br.pc_only{
		display:inline;
	}
}
@media screen and (min-width:1024px) {
	ul.movie .slick-current p{
		padding-top: 20px;
	}
	.movie-theme .bt-area {
        padding: 40px 0;
    }
}

@media screen and (min-width:1300px) {
	ul.movie{
		height: 700px;
	}
	ul.movie li p{
		font-size: 30px;
	}
	ul.movie li p small{
		font-size: 22px;
	}
	.movie-theme{
		font-size: 24px;
	}
}

#gallery .inner{
	padding: 0;
}
#gallery h2{
	font-size: 40px;
	color: var(--w-bg-color);
}
#gallery h3{
	border: 2px solid var(--w-bg-color);
	color: var(--w-bg-color);
	margin:0 auto 30px auto;
	max-width: 185px;
	padding: 10px;
	border-radius: 50px;
	text-align: center;
	font-size: 18px;
}
.arrow_box,
.arrow_box_mov{
	display: flex;
	background: var(--bg-color);
	width: 152px;
	margin: auto;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	border-radius: 40px;
	margin-bottom: 20px;
	color: white;
}
/*.arrow_box{
	display: none;
}*/
.slide-arrow{
	display: block;
}
.slide-arrow.prev-arrow:before{
	content: "←";
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
}
.slide-arrow.next-arrow:before{
	content: "→";
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
}
@keyframes balloonMove {
	0% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(5%);
	}
}
.slick-dots{
	position: relative;
	width:120%;
    margin: 0 -10%;
	height: 200px;
}
.slick-dots li{
	width: auto;
	height: auto;
}
.slick-dots li button {
	width: auto;
	height: auto;
    padding: 0px;
}
.slick-dots li button:before{
	opacity: 1;
}
.slick-dots li button#slick-slide-control00{

}
.slick-dots li button#slick-slide-control00:before {
	display: none;

}
.slick-dots li button#slick-slide-control01{
	width: 200px;
	height: 102px;
}
.slick-dots li button#slick-slide-control01:before {
    content: "";
	background: url(../img/fukidashi_1.png) no-repeat;
	background-size: 100%;
	width: 200px;
	height: 102px;
	animation: balloonMove 3s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control02{
	width: 180px;
	height: 101px;
}
.slick-dots li button#slick-slide-control02:before {
    content: "";
	background: url(../img/fukidashi_2.png) no-repeat;
	background-size: 100%;
	width: 180px;
	height: 101px;
	animation: balloonMove 2.6s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control03{
	width: 202px;
	height: 103px;
}
.slick-dots li button#slick-slide-control03:before {
    content: "";
	background: url(../img/fukidashi_3.png) no-repeat;
	background-size: 100%;
	width: 202px;
	height: 103px;
	animation: balloonMove 3.2s ease-in-out alternate-reverse infinite;
}
.slick-dots li button#slick-slide-control04{
	width: 180px;
	height: 101px;
}
.slick-dots li button#slick-slide-control04:before {
    content: "";
	background: url(../img/fukidashi_4.png) no-repeat;
	background-size: 100%;
	width: 180px;
	height: 101px;
	animation: balloonMove 2.8s ease-in-out alternate-reverse infinite;
}
.slick-dots li button#slick-slide-control05{
	width: 198px;
	height: 78px;
}
.slick-dots li button#slick-slide-control05:before {
    content: "";
	background: url(../img/fukidashi_5.png) no-repeat;
	background-size: 100%;
	width: 198px;
	height: 78px;
	animation: balloonMove 3.6s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control06{
	width: 140px;
	height: 92px;
}
.slick-dots li button#slick-slide-control06:before {
    content: "";
	background: url(../img/fukidashi_6.png) no-repeat;
	background-size: 100%;
	width: 140px;
	height: 92px;
	animation: balloonMove 2.4s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control07{
	width: 150px;
	height: 65px;
}
.slick-dots li button#slick-slide-control07:before {
    content: "";
	background: url(../img/fukidashi_7.png) no-repeat;
	background-size: 100%;
	width: 150px;
	height: 65px;
	animation: balloonMove 3.4s ease-in-out alternate-reverse infinite;
}
.slick-dots li button#slick-slide-control08{
	width: 204px;
	height: 92px;
}
.slick-dots li button#slick-slide-control08:before {
    content: "";
	background: url(../img/fukidashi_8.png) no-repeat;
	background-size: 100%;
	width: 204px;
	height: 92px;
	animation: balloonMove 2.5s ease-in-out alternate-reverse infinite;
}
.slick-dots li button#slick-slide-control09{
	width: 190px;
	height: 92px;
}
.slick-dots li button#slick-slide-control09:before {
    content: "";
	background: url(../img/fukidashi_9.png) no-repeat;
	background-size: 100%;
	width: 190px;
	height: 92px;
	animation: balloonMove 3.5s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control010{
	width: 180px;
	height: 101px;
}
.slick-dots li button#slick-slide-control010:before {
    content: "";
	background: url(../img/fukidashi_10.png) no-repeat;
	background-size: 100%;
	width: 180px;
	height: 101px;
	animation: balloonMove 2.5s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control011{
	width: 200px;
	height: 85px;
}
.slick-dots li button#slick-slide-control011:before {
    content: "";
	background: url(../img/fukidashi_11.png) no-repeat;
	background-size: 100%;
	width: 200px;
	height: 85px;
	animation: balloonMove 3.2s ease-in-out alternate infinite;
}
.slick-dots li button#slick-slide-control012{
	width: 200px;
	height: 81px;
}
.slick-dots li button#slick-slide-control012:before {
    content: "";
	background: url(../img/fukidashi_12.png) no-repeat;
	background-size: 100%;
	width: 200px;
	height: 81px;
	animation: balloonMove 2.8s ease-in-out alternate infinite;
}
@media screen and (min-width:1025px) {
	.arrow_box,
	.arrow_box_mov{
		display:flex;
	}
	.slick-dots{
		height: 130px;
	}

	.slick-dots li button#slick-slide-control01{
		width: 300px;
		height: 153px;
	}
	.slick-dots li button#slick-slide-control01:before {
		width: 300px;
		height: 153px;
	}
	.slick-dots li button#slick-slide-control02{
		width: 280px;
		height: 157px;
	}
	.slick-dots li button#slick-slide-control02:before {
		width: 280px;
		height: 157px;
	}
	.slick-dots li button#slick-slide-control03{
		width: 300px;
		height: 153px;
	}
	.slick-dots li button#slick-slide-control03:before {
		width: 300px;
		height: 153px;
	}
	.slick-dots li button#slick-slide-control04{
		width: 280px;
		height: 157px;
	}
	.slick-dots li button#slick-slide-control04:before {
		width: 280px;
		height: 157px;
	}
	.slick-dots li button#slick-slide-control05{
		width: 300px;
		height: 118px;
	}
	.slick-dots li button#slick-slide-control05:before {
		width: 300px;
		height: 118px;
	}
	.slick-dots li button#slick-slide-control06{
		width: 200px;
		height: 131.5px;
	}
	.slick-dots li button#slick-slide-control06:before {
		width: 200px;
		height: 131.5px;
	}
	.slick-dots li button#slick-slide-control07{
		width: 250px;
		height: 108px;
	}
	.slick-dots li button#slick-slide-control07:before {
		width: 250px;
		height: 108px;
	}
	.slick-dots li button#slick-slide-control08{
		width: 300px;
		height: 135px;
	}
	.slick-dots li button#slick-slide-control08:before {
		width: 300px;
		height: 135px;
	}
	.slick-dots li button#slick-slide-control09{
		width: 290px;
		height: 140.5px;
	}
	.slick-dots li button#slick-slide-control09:before {
		width: 290px;
		height: 140.5px;
	}
	.slick-dots li button#slick-slide-control010{
		width: 270px;
		height: 130px;
	}
	.slick-dots li button#slick-slide-control010:before {
		width: 270px;
		height: 130px;
	}
	.slick-dots li button#slick-slide-control011{
		width: 300px;
		height: 127.5px;
	}
	.slick-dots li button#slick-slide-control011:before {
		width: 300px;
		height: 127.5px;
	}
	.slick-dots li button#slick-slide-control012{
		width: 300px;
		height: 122px;
	}
	.slick-dots li button#slick-slide-control012:before {
		width: 300px;
		height: 122px;
	}
}
@media screen and (min-width:767px) {
	.slick-dots{
		height: 130px;
	}
}

details {
	/*max-width: 395px;*/
	padding: 10px 0;
	color: var(--text-color);
	margin:0 15px;
}

summary {
	position: relative;
	display: flex;
	align-items: center;
	padding: 20px 0px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	display: flex;
	align-items: center;
	font-weight: 700;
	border-top: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
}
summary::-webkit-details-marker {
	display: none;
}
summary div.comment span{
	font-weight: 700;
	display: block;
}
summary div.comment {
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 10px;
	font-size: 24px;
}
summary div.comment span{
	position: absolute;
	top: 0;
	left: 0;
}
summary div.mark{
	position: relative;
    width: 15px;
    height: 15px;
}
summary div.mark::before {
    content: "";
    display: block;
    width: 15px;
    height: 2px;
    position: absolute;
    top: 7px;
    right: 0px;
    background-color: var(--text-color);
}
summary div.mark::after {
    content: "";
    display: block;
    width: 2px;
    height: 15px;
    position: absolute;
    top: 0px;
    right: 7px;
    background-color: var(--text-color);
}
div.answer{
	padding: 10px 0;
	border-bottom: 2px solid var(--text-color);
}
details[open] summary {
	padding-bottom: 10px;
	border-bottom: none;
}
details[open] summary{
	border-bottom: none;
}
details[open] summary div.mark::after{
	display: none;
}

.poster-gallery{
	display: none;
}
.answer.pc_only{
	display: none;
}

.gallery-list{
	display: none;
}
@media screen and (min-width:768px) {
	#gallery .inner{
		max-width: none;
	}
	#gallery h2{
		font-size: 56px;
	}
	#gallery h3{
		font-size: 18px;
		max-width: 312px;
	}
	.slick-slide {
        margin: 0px 10px;
        height: auto;
    }
	.slick-slide img {
		-webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        transform: scale(0.9);
	}
	.slick-current img,
	.is-active-next img{
		transform: scale(1.1);
	}
	/*ul.gallery li{
		padding: 20px 10px;
	}
	ul.gallery .slick-current{
		padding: 40px 10px;
	}
	ul.gallery .slick-current img{
		transform: scale(1.30);
	}*/
	.gallery-list{
		display: block;
	}
	.poster-gallery{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 -1%;
		max-width: 80%;
		margin: 0  auto;
		padding: 50px 0;
	}
	.poster-gallery img{
		width: 23%;
		margin: 20px 1%;
	}
	details {
		margin: 50px 15px;
		width: auto;
		max-width: none;
	}
	details summary{
		max-width: 795px;
		margin: auto;
	}
	.answer{
		font-size: 18px;
		max-width: 795px;
		margin: auto;
	}
}
@media screen and (min-width:1161px) {
	details {
		margin: 50px auto;
	}
}

.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.modal__bg {
    background: #000;
    opacity: 1;
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
    height:auto;
	max-height: 90vh;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
	max-width: 500px;
    box-sizing: border-box;
}

.modal__content .modal-inner {
    height: auto;
	max-height: 95vh;
    overflow-y: auto;
    background: transparent;
	color: var(--text-color);
	border:none;
	overflow-y: hidden;
    padding: 0px;
}
.modal__content .modal-inner a{
	color: var(--text-color);
}
.modal__content .modal-inner > div{
	padding-bottom: 20px;
}
.modal__content .modal-inner .tag{
	font-size: 20px;
}
.modal__content .modal-inner .tag a.pc_only{
	display: none;
}
@media screen and (min-width:1024px) {
	.modal__content.poster-wrap{
		max-width: none;
	}
	.modal__content.poster-wrap .modal-inner{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.modal__content .modal-inner .tag{
		font-size: 48px;
		/*width: 48%;*/
		margin-right: 2%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.modal__content .modal-inner .tag a.pc_only{
		display: block;
		width: 270px;
		margin: 30px auto;
		border: 1px solid white;
		border-radius: 50px;
		padding: 20px 30px 20px 20px;
		text-align: center;
		position: relative;
		font-size: 20px;
	}
	.modal__content .modal-inner .tag a.pc_only:hover{
		background: rgba(255 255 255/0.2);
	}
	.modal__content .modal-inner .tag a.pc_only:after{
		content: "";
		width: 36px;
		height: 30px;
		background: url(../img/share.png) no-repeat center center/100%;
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
	img.poster{
		width: 40%;
		object-fit:contain;
		height: 90vh;
	}
}

.modal__content .modal-inner .tag a:after{
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../img/share.png) no-repeat left top/100%;
	margin-left: 0.2em;
	vertical-align: middle;
}
.modal__content .modal-inner h4{
	font-size: 18px;
	font-weight: 700;
	padding-bottom: 5px;
}
.modal__content .modal-inner a.bt{
	display: block;
	margin: 0px auto;
	padding: 10px 0;
	text-align: center;
	width: 12em;
}
.modal__content .modal-inner p{
	padding-bottom: 1em;
}

.modal__content .modal-inner p.name{
	font-size: 24px;
	line-height: 1em;
	font-weight: 700;
}
.modal__content .modal-inner p.name span.chara{
	font-size: 12px;
	display: block;
}
.modal__content .modal-inner p.txt span{
	padding-left: 1.2em;
	display: block;
	position: relative;
}
.modal__content .modal-inner p.txt span:before{
	content: "※";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
.modal__content .modal-inner p.txt a{
	text-decoration: underline;
}

@media screen and (max-width:1600px) {
	.modal__content .modal-inner .tag br.pc_only{
		display:none;
	}
}

/*バツボタン*/
.batsu {
    display: block;
    position: fixed;
    width: 46px;
    height: 46px;
	top: 5px;
	right: 5px;
	background: transparent;
}

.batsu::before,
.batsu::after {
    /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    /* 棒の幅（太さ） */
	height: 40px;
    background:var(--text-color);
}

.batsu::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.batsu::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/***************************************
サポーター募集
***************************************/
#supporter{
	background:rgba(18 18 18/0.7);
	padding: 40px 0;
}
#supporter a{
	background: url(../img/supporter.jpg) no-repeat center center/cover;
	display: block;
	padding: 40px 30px 100px 30px;
	text-align: left;
	font-size: 32px;
	border-radius: 30px;
	position: relative;
	box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.16);
	color: var(--text-color);
}
section#supporter a p{
	line-height: 1.6em;
}
section#supporter a p.small{
	font-size: 16px;
	font-weight: 700;
}
#supporter a span{
	background: var(--text-color);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 30px;
	position: absolute;
	bottom: 30px;
	right: 30px;
	border-radius: 30px;
}
#supporter a span:after{
	content:"→";
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	display: block;
	transform: rotate(-45deg);
	color: var(--b-text-color);
}

@media screen and (min-width:768px) {
	#supporter{
		padding: 100px 0;
		margin: 0;
	}
	#supporter a{
		max-width: 700px;
		margin: auto;
		padding: 80px 40px 100px 40px;
		font-size: 44px;
	}
	section#supporter a p.small{
		font-size: 20px;
		padding-top: 20px;
		font-weight: 700;
	}
	#supporter a span{
		padding: 15px 60px;
		border-radius: 100px;
	}
	#supporter a span:after{
		font-size: 52px;
	}
}

/***************************************
運営
***************************************/
#operation{
	background: var(--w-bg-color);
	font-size: 16px;
}
#operation h2{
	transform: skew(0);
	font-size: 18px;
	text-align: left;
	margin: 20px 0 10px 0;
}
#operation a img.banner{
	padding: 20px 0;
	width: 85%;
}
.epresentative{
	padding: 30px 0;
}
.epresentative p.name strong{
	font-size: 24px;
	letter-spacing: 0.1em;
}
.profile-img.pc_only{
	display: none;
}
.profile-img{
	text-align: center;
}
.profile-img img{
	width: 166px;
	height: 166px;
	margin-bottom: 20px;
}
section .inner .profile p{
	text-align: left;
	line-height: 1.8em;
	padding-bottom: 1.5em;
}
.inq{
	padding: 20px 0;
	font-size: 18px;
}
.inq a{
	text-decoration: underline;
	display: block;
	padding: 10px 0;
}

.sns{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding:20px 0 ;
}
.sns a{
	display: block;
	width: 14%;
	margin: 0 5% 0 0;
}
.sns a img{
	width: 36px;
}


@media screen and (min-width:768px) {
	#operation{
		margin: 0 auto;
		font-size: 18px;
		padding: 70px 0;
	}
	#operation .inner{
		max-width: 1280px;
	}
	#operation h2{
		text-align: center;
		font-size: 48px;
		padding-bottom: 50px;
	}
	#operation .info{
		display: flex;
		flex-direction: column-reverse;
		text-align: center;
	}
	#operation a img.banner{
		max-width: 678px;
		display: block;
		margin: 30px auto;
	}
	.profile-img.pc_only{
		display: block;
	}
	.profile-img.sp_only{
		display: none;
	}
	.profile-img {
		width: 330px;
	}
	.profile-img img{
		width:330px;
		height: 330px;
		margin-bottom: 20px;
	}
	#operation .flex{
		justify-content: space-between;
		align-items: center;
	}
	.profile{
		width: calc(100% - 380px);
	}
	section .inner .profile p{
		text-align: left;
	}
	div.inq{
		text-align: center;
		font-size: 20px;
		padding-top: 40px;
		padding-bottom: 60px;
	}
	.sns{
		justify-content: center;
	}
	.sns a{
		display: block;
		width: auto;
		margin: 0 1.5%;
	}
	.sns a img{
		width: 45px;
	}

}

/*------------フッター-----------------*/
footer {
	padding: 40px 0;
	background: var(--bg-color);
	color:var(--text-color);
}
footer p {
	text-align: center;
	font-size: 12px;
}

@media screen and (min-width:768px) {
	footer p {
		font-size: 16px;
		font-weight: 500;
	}
}


/***************************************
13.pagetop
***************************************/
section.top{
	margin: auto;
	max-width: 395px;
	padding: 0;
}
#pagetop {
    /*position: fixed;
    bottom: 5px;
	z-index: 80;*/
}
#pagetop a{
	display: block;
	text-align: left;
}
#pagetop a:after{
	content: "";
	display: inline-block;
	width: 12px;
	height: 11px;
	background: url(../img/arrow_up.svg) no-repeat center center/100%;
	margin-left: 0.8em;
}
#pagetop img {
    width: 100%;
    height: auto;
}

@media screen and (min-width:768px) {
	section.top{
		max-width: 98%;
		padding: 0;
	}
}