/* -------sns icon--------- */
@font-face {
	font-family: 'sns_ico';
	src:
		url('../fonts/sns_ico.ttf?sij4de') format('truetype'),
		url('../fonts/sns_ico.woff?sij4de') format('woff'),
		url('../fonts/sns_ico.svg?sij4de#sns_ico') format('svg');
	font-weight: normal;
	font-style: normal;
}

i.snsIcon {
	font-family: 'sns_ico' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #000;
}

.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-tw:before { content: "\e908";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}

/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
html {
  background-color: #7ead2e;
	scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: min(3.4vw, 16px);
  color: #fff;
  -webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
  letter-spacing: 0.1em;
	line-height: 1.8;
  position: relative;
  z-index: -1;
  overflow: hidden;
  background: url(../images/bg_pc.jpg);
  background-size: max(100%, 82vh);
  background-position: top;
  background-repeat: no-repeat;
}

section {
	padding: min(10vw, 100px) min(6vw, 64px);
}
.leadArea + section {
	padding-top: min(20vw, 200px);
}
.inner {
  max-width: 1080px;
  margin: auto;
  padding: min(10vw, 100px) min(6vw, 64px);
}
.inner.bgWh {
	background-color: #fff;color: #000;
}

h2 {
	font-size: min(5.2vw, 32px);
	text-align: center;
	margin-bottom: min(4vw, 32px);
}

img {
	width: 100%;
	vertical-align: middle;
}
li {
	list-style: none;
}
a {
	transition: all 0.5s ease;
	text-decoration: none;
	color: #fff;
}
.anim {
	opacity: 0;
	transition: all .4s ease-out;
}
.anim.on {
	opacity: 1;
}
@keyframes op {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.btnWrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(4vw, 32px);
	margin-top: min(4vw, 32px);
}
.btnWrap a,
.btnWrap span {
	width: 100%;
	max-width: 380px;
	min-width: fit-content;
	display: block;
	padding: 0.75em 0 0.92em;
	font-size: min(4.2vw, 24px);
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: min(2vw, 10px);
}

.listDisc,
.listAsterisk {
	list-style: none;
	padding-left: 1.2em;
	font-size: min(3.2vw, 16px);
}
.listDisc > li,
.listAsterisk > li {
	text-indent: -1.2em;
}
.listDisc > li:before,
.listAsterisk > li:before {
	margin-right: 0.2em;
}
.listDisc > li:before {
	content: "・";
}
.listAsterisk > li:before {
	content: "※";
}

.notice {
	color: #d50505;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.6;
	}
}
@media screen and (min-width:821px) {
	.sp {display: none;}
}
@media screen and (max-width: 820px) {
  .pc {
    display: none;
  }
}


/* ----- top visual ----- */
.fv {
  position: relative;
	width: 100vw;
	height: 100vh;
  height: 100svh;
}

.fv_deco01 {
	position: absolute;
	right: -16vh;
	bottom: -24vh;
	width: min(78vh, 98vw);
}
.fv_deco01 img {
	transform: rotate(-7deg);
	animation: fv_deco_rotate 3s ease-in-out infinite alternate;
}
.fv_deco02 {
	position: absolute;
	top: -5vh;
	left: -12vh;
	width: min(43vh, 58vw);
}
.fv_deco02 img {
	transform: rotate(-7deg);
	animation: fv_deco_rotate 3s ease-in-out 0.5s infinite alternate;
}
.fv_deco03 {
	position: absolute;
	top: 61vh;
	left: -12vh;
	width: min(62vh, 80vw);

	transform: translateX(-7px);
	animation: fv_deco_slide 3s ease-in-out 1s infinite alternate;
}
.fv_deco04 {
	position: absolute;
	top: 10vh;
	right: 8vh;
	width: min(37vh, 60vw);

	transform: translateX(-7px);
	animation: fv_deco_slide 3s ease-in-out 1.5s infinite alternate;
}
.fv_deco05 {
	position: absolute;
	top: max(-21vh, -36vw);
	left: min(60vh, 20vw);
	width: 26vh;
	opacity: 0.6;
}
.fv_deco06 {
	position: absolute;
	top: 63vh;
	left: min(7vh, 3vw);
	width: min(23vh, 26vw);
}
.fv_deco07 {
	position: absolute;
	top: min(36vh, 44vw);
	right: 3vh;
	width: min(23vh, 26vw);
}
.fv_deco01::before,
.fv_deco02::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 100%;
}
.fv_deco01::before,
.fv_deco02::before {
	box-shadow:0 4px 20px 0px rgba(15,105,60,0.3);
}
.fv_deco03,
.fv_deco04 {
	filter: drop-shadow(0 4px 20px rgba(15,105,60,0.3));
}
@keyframes fv_deco_slide {
  0% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(7px);
  }
}
@keyframes fv_deco_rotate {
  0% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(7deg);
  }
}


.fv .pagetitle {
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 95vh;
  max-width: 82%;
  opacity: 0;
  animation: ttl 2s ease-in-out 0.8s forwards;
	z-index: 1;
}
@keyframes ttl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fv .link_official {
  position: absolute;
  width: min(40vw, 280px);
  top: min(6vw, 54px);
  left: min(4vw, 48px);
}
.fv .entryBnr {
  position: fixed;
  right: 2vw;
  bottom: 4vh;
	z-index: 5;
}
.fv .entryBnr a,
.fv .entryBnr span {
	width: min(12vw, 230px);
	height: min(12vw, 230px);
  z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(15, 105, 60, 0.2);
	border-radius: 100%;
	font-size: min(1.8vw, 34px);
	font-weight: 700;
	line-height: 1.5;

	opacity: 0;
  animation: ttl 0.8s ease-in-out 1.6s forwards;
	transition: all 0.5s ease;
}
.fv .entryBnr span {
	color: rgba(255, 255, 255, 0.3);
}
.fv .entryBnr a:hover,
.fv .entryBnr span:hover {
	background-color: rgba(15, 105, 60, 0.8);
}
.fv .entryBnr a::before,
.fv .entryBnr span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 100%;
	border: 4px solid transparent;
	/* background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 72%, rgba(255, 255, 255, 1) 90%) border-box border-box; */
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 1) 80%) border-box border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
	-webkit-mask-composite: destination-out;
	mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
	mask-composite: exclude;

	transform: rotate(0deg);
	animation: bnrRotate 1.6s ease-in-out infinite;
}
@keyframes bnrRotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.fv .entryBnr.end span::after {
	white-space: pre;
	content: "応募受付は\A終了いたしました";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-13deg);
	z-index: 1;
	font-weight: bold;
	text-align: center;
	font-size: 1.6vw;
	line-height: 1.5;
	letter-spacing: 0;
	color: #fff;
}
.fv .entryBnr.end a::before,
.fv .entryBnr.end span::before {
	opacity: 0.6;
}

.fv .scroll {
  position: absolute;
  width: 1px;
  height: 10vh;
  bottom: 5vh;
  left: 50%;
  overflow: hidden;
  opacity: 0;
  animation: ttl 0.5s ease-out 1.5s forwards;
}
.fv .scroll::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  animation: scrl 1.2s linear 0s infinite;
}
@keyframes scrl {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@media screen and (max-width: 820px) {
	.fv .pagetitle_wrap {
    	padding-bottom: 10vh;
	}
  .fv .link_entry {
    width: min(30vw, 220px);
    right: 4vw;
  }
}

/* 縦長 */
@media screen and (orientation: portrait) {

	.fv_deco04 {
		top: 20vh;
		right: -5vw;
	}
	.fv .entryBnr a,
	.fv .entryBnr span {
		width: min(24vw, 230px);
		height: min(24vw, 230px);
		font-size: min(3.8vw, 34px);
	}
	.fv .entryBnr a::before,
	.fv .entryBnr span::before {
		border: 3px solid transparent;
	}
}

/* ----- leadArea ----- */
.leadArea {
	position: relative;
  background-color: rgba(1, 97, 51, 0.5);
	padding: min(10vw, 100px) min(6vw, 64px);
	margin-top: min(12vw, 60px);
}
.leadArea .inner {
	position: relative;
	background: linear-gradient(110deg, #00562b 11%, #d8ab04 100%);
	border-radius: min(2vw, 10px);
	padding: min(3vw, 24px) min(4vw, 64px);
}
.leadArea .inner + .inner {
	margin-top: min(3vw, 24px);
}
.leadArea p {
	position: relative;
	font-size: min(3.6vw, 18px);
	/* line-height: 2; */
	z-index: 10;
}
.leadArea p + p {
	margin-top: 0.5em;
}
.leadArea .deco01 {
	position: absolute;
	top: max(-7vw, -108px);
	left: max(-12vw, -165px);
	width: min(40vw, 630px);
}
.leadArea .deco02 {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(30vw, 475px);
}
.leadArea .deco03 {
	position: absolute;
	left: 4vw;
	bottom: 50%;
	width: min(3vw, 46px);
}
.leadArea .deco04 {
	position: absolute;
	left: max(-8vw, -165px);
	bottom: 0;
	width: min(46vw, 670px);
}
.leadArea .deco01,
.leadArea .deco02,
.leadArea .deco04 {
	filter: drop-shadow(0 4px 20px rgba(15,105,60,0.3));
}

.leadArea .nextBtn  {
	display: flex;
	justify-content: center;
	margin-top: min(6vw, 64px);
}
.leadArea .nextBtn > a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(54vw, 415px);
	height: min(54vw, 415px);
	transition: all 0.5s ease;
}
.leadArea .nextBtn > a::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../images/next_btn.png);
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(-7deg);
	animation: fv_deco_rotate 3s ease-in-out infinite alternate;
}
.leadArea .nextBtn p {
	position: relative;
	font-size: min(4vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	padding-bottom: 1.8em;
}
.leadArea .nextBtn p::before,
.leadArea .nextBtn p::after {
	display: block;
	content: "";
	position: absolute;
	top: 5.4em;
	background-color: #fff;
	width: 2.7em;
	height: 0.06em;
	transition: all 0.5s ease;
}
.leadArea .nextBtn p::before {
	transform: rotate(30deg) translateX(-107%);
	left: 50%;
}
.leadArea .nextBtn p::after {
	transform: rotate(150deg) translateX(-107%);
	right: 50%;
}
@media (hover: hover) {
	.leadArea .nextBtn > a:hover {
		opacity: 0.6;
	}
	.leadArea .nextBtn > a:hover p::before,
	.leadArea .nextBtn > a:hover p::after {
		top: 5.8em;
	}
}

@media screen and (orientation: portrait) {
	.leadArea .deco01 {
		top: -22vw;
		left: -25vw;
		width: 56vw;
	}
	.leadArea .deco02 {
		bottom: -8vw;
		width: 60vw;
	}
	.leadArea .deco03 {
		bottom: 48vw;
		left: 8vw;
		width: 8vw;
	}
	.leadArea .deco04 {
		left: -18vw;
		bottom: 10vw;
		width: 80vw;
	}
}
/* ----- description ----- */
#description .inner {
	padding: 0;
}
.descriptionList {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: min(4vw, 32px);
}
.descriptionList > li {
	padding: min(4vw, 32px);
	background-color: #fff;
	color: #000;
}
.descriptionList > li:nth-child(3) {
	grid-column: 1 / 3;
}
.descriptionList > li p {
	font-size: min(3.8vw, 18px);
}
.descriptionList > li .title {
	font-size: min(4.2vw, 20px);
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #016133;
	margin-bottom: 1em;
}
.descriptionList .listDisc span {
	font-size: min(2.8vw, 14px);
}

@media screen and (max-width: 820px) {
	.descriptionList {
		grid-template-columns: 1fr;
	}
	.descriptionList > li:nth-child(3) {
		grid-column: 1;
	}
}

/* ----- flow ----- */
#flow .inner {
	padding: 0;
}
.flowList h3 {
	font-size: min(4.8vw, 28px);
	text-align: center;
	margin-bottom: min(4vw, 32px);
}
.flowList > div:not(:last-child) {
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(3vw, 30px)), calc(50% + min(4.4vw, 44px)) calc(100% - min(3vw, 30px)), 50% 100%, calc(50% - min(4.4vw, 44px)) calc(100% - min(3vw, 30px)), 0 calc(100% - min(3vw, 30px)));
	background-color: #016133;
	padding-bottom: min(3vw, 30px);
	margin-bottom: min(2vw, 16px);
}
.flowList > div:not(:last-child)::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	content: "";
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(3vw, 30px)), calc(50% + min(4.4vw, 44px)) calc(100% - min(3vw, 30px)), 50% 100%, calc(50% - min(4.4vw, 44px)) calc(100% - min(3vw, 30px)), 0 calc(100% - min(3vw, 30px)));
	background-image: url(../images/bg_sp.jpg);
	background-size: cover;
	background-position: 50% 5%;
	width: 100%;
	height: 100%;
	opacity: 0.3;
}
.flowList > div:not(.flow04) > div {
	position: relative;
	z-index: 1;
	padding: min(6vw, 40px) min(4vw, 40px) min(7vw, 60px);
}
.flowList p.date {
	display: flex;
	align-items: center;
	gap: min(2vw, 10px);
	font-family: "Oswald", serif;
	font-size: min(7.6vw, 40px);
	letter-spacing: 0.01em;
  font-weight: 600;
  font-style: normal;
}
.flowList p.date span {
	font-size: 0.4em;
	font-weight: 400;
	padding-top: 0.2em;
}

.flowList .flow01 {
	display: flex;
	justify-content: center;
	gap: min(2vw, 16px);
	font-size: min(7.6vw, 40px);
	line-height: 1.2;
}
.flowList .flow02,
.flowList .flow03 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: min(3vw, 24px);
}
.flowList .flow02 > div,
.flowList .flow03 > div {
	background-color: #fff;
	padding: min(3vw, 24px);
	color: #016133;
	text-align: center;
	line-height: 1.6;
}
.flowList .flow02 > div p.date,
.flowList .flow03 > div p.date {
	justify-content: center;
}
.flowList .flow02 > div p:nth-child(2) {
	font-size: min(4.2vw, 20px);
	font-weight: 700;
}
.flowList .flow03 > div p:nth-child(2) {
	font-size: min(3.8vw, 18px);
}
.flowList .flow04 {
	position: relative;
}
.flowList .flow04 > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-bottom: 2%;
}
.flowList .flow04 h3 {
	margin-bottom: 0;
}
.flowList .flow04 .flow04Date {
	display: flex;
	justify-content: center;
	gap: min(2vw, 16px);
	font-size: min(7.6vw, 40px);
	margin-bottom: 3%;
}
.flowList .flow04 .flow04Line {
	display: block;
	width: 60%;
	height: 2px;
	background-color: #fff;
	margin-bottom: 6%;
}
.flowList .flow04 .textImg {
	width: 48%;
	margin: 0 auto;
}
@media screen and (max-width: 820px) {
	.flowList .flow04 > div {
		padding-bottom: 4%;
	}
	.flowList .flow04 h3 {
		font-size: min(4.8vw, 40px);
	}
	.flowList .flow04 .flow04Date,
	.flowList .flow04 .flow04Date p.date {
		font-size: min(7.6vw, 64px);
	}
	.flowList .flow04 .flow04Date {
		margin-bottom: 4%;
	}
	.flowList .flow04 .flow04Line {
		width: 84%;
		margin-bottom: 8%;
	}
	.flowList .flow04 .textImg {
		width: 80%;
	}
}



/* ----- howEntry ----- */
#howEntry h3 {
	font-size: min(4.2vw, 24px);
	margin-bottom: min(3vw, 24px);
}
#howEntry .textArea {
	padding-bottom: min(5vw, 48px);
	border-bottom: #bbb solid 1px;
	margin-bottom: min(4vw, 40px);
}
#howEntry .textArea p {
	font-size: min(3.8vw, 18px);
	text-align: center;
}
#howEntry .textArea .note {
	font-size: min(2.8vw, 14px);
	margin-top: 1.5em;
}
#howEntry .textArea .btnWrap a {
	background-color: #f7ae09;
	animation: btnAnim 4s linear 0s infinite;
}
#howEntry .textArea .btnWrap span {
	background-color: #c7c7c7;
	animation: btnAnim2 4s linear 0s infinite;
}
@keyframes btnAnim {
	0%{background-color: #f7ae09;}
	50%{background-color: #ec7517;}
	100%{background-color: #f7ae09;}
}
@keyframes btnAnim2 {
	0%{background-color: #c7c7c7;}
	50%{background-color: #9f9e9e;}
	100%{background-color: #c7c7c7;}
}
#howEntry .textArea .notice + .btnWrap {
	margin-top: min(1vw, 6px);
}
#howEntry .textArea .notice {
	margin-top: min(4vw, 32px);
}
#howEntry .listAsterisk + p {
	font-size: min(3.2vw, 16px);
	margin-top: 0.5em;
}

#howEntry .info {
	display: block;
	text-align: center;
	color: #000;
	font-size: min(2.8vw, 14px);
	text-decoration: underline;
	margin-top: 1em;
}


/* ----- footer ----- */
footer {
	position: relative;
  padding-top: min(32vw, 320px);
  padding-bottom: min(12vw, 120px);
}
footer::before {
	position: absolute;
	left: 0;
	bottom: 0;
  display: block;
	content: "";
	width: 100vw;
	height: 100%;
	z-index: -1;
	background-color: #fff;
	clip-path: polygon(50% 0%, 100% calc(100% - min(20vw, 100px)), 100% 100%, 0 100%, 0 calc(100% - min(20vw, 100px)));
}
footer .summersonic {
  width: min(32%, 280px);
  display: block;
  margin: auto;
}
footer .logo_list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
	gap: min(4vw, 40px);
  margin: min(6vw, 64px) auto min(14vw, 100px);
}
footer .logo_list .creativeman {
  width: min(25.5%, 230px);
}
footer .logo_list .jisedai {
  width: min(19%, 172px);
}
footer .logo_list .eplus {
  width: min(25.5%, 208px);
  padding-right: min(2.5%, 22px);
}
footer .logo_list li img {
  width: 100%;
}
footer .copy {
	color: #000;
  text-align: center;
  font-size: min(2.4vw, 13px);
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.02em;
}

/* @media screen and (min-width: 821px) {
  footer .creativeman {
    width: 30.1%;
  }
  footer .summersonic {
    width: 27.1%;
  }
  footer .eplus {
    width: 22.8%;
  }
} */