@charset "utf-8";

/* animation settings */
#main-graphic .obj {
  fill: #f8b42d;
  stroke: #f8b42d;
  stroke-miterlimit: 10;
}
#main-graphic .obj01 {
  stroke-dasharray: 1353;
  stroke-dashoffset: 1353;
  animation: stroke01 4s linear;
}
#main-graphic .obj02 {
  stroke-dasharray: 1352;
  stroke-dashoffset: 1352;
  animation: stroke02 4s linear;
}
@keyframes stroke01 {
  0% {
	stroke-dashoffset: 1700;
	fill-opacity: 0;
	}
  80% { 
	stroke-dashoffset: 0;
	fill-opacity: 0;
	}
  100% {
	stroke-dashoffset: 0;
	fill-opacity: 100;
	}
}
@keyframes stroke02 {
  0% {
	stroke-dashoffset: 1700;
	fill-opacity: 0;
	}
  80% { 
	stroke-dashoffset: 0;
	fill-opacity: 0;
	}
  100% {
	stroke-dashoffset: 0;
	fill-opacity: 100;
	}
}
#header-root .content {
	opacity: 1.0;
	transition: 2.0s;
	transition-delay: 3.0s;
}
#header-root .content.animate {
	opacity: 0;
}
#main-visual {
}
#main-visual .catch {
	transition: 2.0s;
	transition-delay: 3.0s;
}
#main-visual .main {
	transition: 2.0s;
	transition-delay: 3.0s;
}
#main-visual.animate .catch {
	opacity: 0;
	transform: scale(1.08);
}
#main-visual.animate .main {
	opacity: 0;
}
.symbol {
	transition: 2.0s;
}
.symbol.animate {
	opacity: 0;
	transform: scale(1.08);
}
.arrow-navigation {
	transition: 2.0s;
	transition-delay: 4.0s;
}
.arrow-navigation.animate {
	opacity: 0;
	transform: translateY(-20px);
}
#top_concept h2, #top_story h2, #top_why h2, #top_event h2, #top_news h2, #top_support h2 {
	transition: 1.0s;
	transition-delay: 1.5s;
}
#top_concept h2.animate, #top_story h2.animate, #top_why h2.animate, #top_event h2.animate, #top_news h2.animate, #top_support h2.animate {
	opacity: 0;
	margin-top: -30px;
	margin-bottom: 30px;
}
#top_concept h3, #top_story h3, #top_why h3, #top_event h3, #top_news h3, #top_support h3 {
	transition: 1.0s;
	transition-delay: 2.5s;
}
#top_concept h3.animate, #top_story h3.animate, #top_why h3.animate, #top_event h3.animate, #top_news h3.animate, #top_support h3.animate {
	opacity: 0;
}
#top_concept .main-column, #top_why .main-column, #top_event .content, #top_news .content {
	transition: 1.0s;
	transition-delay: 3.5s;
}
#top_concept .main-column.animate, #top_why .main-column.animate, #top_event .content.animate, #top_news .content.animate {
	transform: translateY(-20px);
	opacity: 0;
}
#top_story .icons {
	transition: 1.0s;
	transition-delay: 3.5s;
}
#top_story .icons.animate {
	opacity: 0;
}
#top_story .navi {
	transition: 1.0s;
	transition-delay: 3.5s;
}
#top_story .navi.animate {
	opacity: 0;
}
.cs_story, .cs_event {
	transition: 1.0s;
	transition-delay: 4.5s;
}
.cs_story.animate, .cs_event.animate {
	opacity: 0;
}

#top_why .figure {
	transition: 1.0s;
	transition-delay: 4.5s;
}
#top_why .figure.animate {
	opacity: 0;
	transform: scale(1.08);
}
#top_why .navi {
	transition: 1.0s;
	transition-delay: 5.5s;
}
#top_why .navi.animate {
	opacity: 0;
}
#top_event .navi, #top_news .navi {
	transition: 1.0s;
	transition-delay: 4.5s;
}
#top_event .navi.animate, #top_news .navi.animate {
	opacity: 0;
}
#top_support .logo {
	transition: 1.0s;
	transition-delay: 3.5s;
}
#top_support .logo.animate {
	opacity: 0;
}
#top_support .figure {
	transition: 1.0s;
	transition-delay: 4.5s;
}
#top_support .figure.animate {
	opacity: 0;
}
#top_support .navi {
	transition: 1.0s;
	transition-delay: 5.5s;
}
#top_support .navi.animate {
	opacity: 0;
}



@media screen and (max-width: 768px) {
	#main-visual {
		width: 100%;
		position: relative;
		margin: 24vw auto;
	}
	#main-visual .logo {
		width: 140%;
		margin-left: -20%;
		transform: rotate(-40deg);
	}
	#main-visual .catch {
		position: absolute;
		left: 16px;
		top: 16%;
		width: 60%;
	}
	#main-visual .main {
		position: absolute;
		left: 16px;
		top: 40%;
		width: 80%;
	}
	.arrow-navigation {
		width: 10vw;
		margin: 4.8vw auto;
	}
	h2 {
		font-size: 9.6vw;
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
		color: #f8b42d;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
	h3 {
		white-space: nowrap;
		font-size: 6.4vw;
		text-align: center;
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
	}
	h3 .jp {
		line-height: 10.4vw;
	}
	#top_concept {
		margin-bottom: 4.8vw;
	}
	#top_concept .root-wrapper {
		width: calc(100% - 32px);
		position: relative;
	}
	#top_why .content, #top_event .content, #top_news .content, #top_support .content {
		width: calc(100% - 32px);
		margin: 0 auto;
	}
	#top_concept .symbol {
		left: -15%;
	}
	#top_concept .content {
	}
	#top_concept h3 {
		line-height: 9.6vw;
		margin: 6.4vw 0;
	}
	#top_concept .main-column, #top_why .main-column {
		width: 100%;
	}
	#top_concept .main-column .part, #top_why .main-column .part {
		width: 100%;
	}
	#top_concept .main-column .part p, #top_why .main-column .part p, #top_why .content .part p {
		font-size: 4.0vw;
		line-height: 7.6vw;
		text-align: justify;
		padding-bottom: 4.8vw;
	}
	.title-text {
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
	}
	#top_story, #top_why {
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	#top_story .symbol, #top_why .symbol {
		right: -15%;
	}
	#top_story .title-block, #top_event .title-block  {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 9.6vw;
		overflow: hidden;
	}
	#top_story .title-block h2, #top_event .title-block h2 {
		order: 1;
	}
	#top_story .title-block h3, #top_event .title-block h3 {
		order: 2;
		margin: 4vw 0;
	}
	#top_story .navi {
		width: calc(100% - 32px);
		display: flex;
		justify-content: center;
		margin: 4vw auto;
	}
	#top_story .icons {
		display: flex;
		width: 400vw;
		margin-left: -150vw;
		overflow: hidden;
		margin-bottom: 8vw;
	}
	#top_story .icons img {
		width: 100%;
	}
	#top_story .icons img:first-child {
		animation: loop 50s -25s linear infinite;
	}
	#top_story .icons img:last-child {
		animation: loop2 50s linear infinite;
	}
	@keyframes loop {
		0% {
			transform: translateX(100%);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes loop2 {
		0% {
			transform: translateX(0);
		}
		to {
			transform: translateX(-200%);
		}
	}
	#top_why .navi {
		width: 100%;
		margin: 4vw auto;
	}
	#top_event .navi {
		width: calc(100% - 32px);
		margin: 4vw auto 8.4vw auto;
	}
	#top_event .form_link {
		margin-top: 4vw;
	}
	.content-separator {
		position: relative; 
		overflow: hidden;
	}
	.content-separator img {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 200%;
		margin-bottom: 8vw;
	}
	#top_why {
		position: relative;
		margin-bottom: 9.6vw;
		
	}
	#top_why .title-block, #top_news .title-block {
		display: flex;
		align-items: center;
		margin: 0 0 8vw 8vw;
	}
	#top_why .title-block h2, #top_news .title-block h2 {
		margin-right: 2.4vw;
	}
	#top_why .figure {
		width: 70%;
		margin: 0 auto 4.8vw auto;
	}
	#top_why .figure li {
		width: 100%;
		margin-bottom: 4.8vw;
	}
	#top_event {
	}
	#top_event .content {
		display: flex;
		flex-direction: column;
	}
	#top_event .content .list {
		order: 2;
		width: 100%;
		border-top: 1px solid #000;
		margin-bottom: 6.4vw;
	}
	#top_event .content .list li {
		border-bottom: 1px solid #000;
	}
	#top_event .content .calendar {
		order: 1;
		width: 100%;
		font-size: 6.4vw;
		font-weight: 700;
	}
	#top_event .content .calendar .calendar-head {
		display: flex;
		align-items: center;
	}
	#top_event .content .calendar .calendar-head .calendar-navi {
		width: 14.2857%;
	}
	#top_event .content .calendar .calendar-head .calendar-navi img {
		width: 100%;
	}
	#top_event .content .calendar .calendar-head .title {
		width: calc(100% - 28.5714%);
		text-align: center;
	}
	#top_event .content .calendar table {
		width: 100%;
		text-align: center;
		border: 1px solid #000;
		background-color: #fff;
		margin-bottom: 4.8vw;
	}
	#top_event .content .calendar table th, #top_event .content .calendar table td {
		width: 14.2857%;
		font-size: 4.0vw;
		border: 1px solid #000;
		text-align: center;
		padding: 3.2vw 0;
	}
	#top_event .content .calendar table th.holiday {
		color: #f8b42d;
	}
	#top_event .content .calendar table td.no-target {
		color: #aaa;
	}
	#top_event .content .calendar table td.active {
		background-color: #f8b42d;
	}
	#top_event .content .calendar table td a {
		display: block;
		width: 100%;
		height: 100%;
		color: #000;
	}
	
	#top_event .content .list li a {
		color: #000;
	}
	#top_event .content .list li .cell {
		padding: 3.2vw 0; 
	}
	#top_event .content .list li .cell .thumbnail {
		width: 100%;
		margin-bottom: 2.4vw;
	}
	#top_event .content .list li .cell .thumbnail img {
		width: 100%;
	}
	#top_event .content .list li .cell .event-body {
		width: 100%;
		font-size: 4.8vw;
	}
	#top_event .content .list li .cell .cat-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2.4vw;
	}
	#top_event .content .list li .cell .ctitle {
		width: 24%;
		text-align: center;
		font-size: 3.2vw;
	}
	#top_event .content .list li .cell .ctitle p {
		border: 1px solid #000;
		border-radius: 3.2vw;
		padding: 1.2vw;
	}
	#top_event .content .list li .cell .date {
		font-size: 3.6vw;
		font-weight: 700;
	}
	#top_event .content .list li .cell .icon {
		width: 16%;
	}
	#top_event .content .list li .cell .event-title {
		font-size: 5.6vw;
		font-weight: 700;
		line-height: 8.4vw;
		margin-bottom: 4vw;
	}
	#top_event .content .list li .cell .event-tag {
		font-size: 4.0vw;
		line-height: 6.8vw;
		margin-bottom: 4vw;
	}
	#top_event .content .list li .cell .event-released {
		font-size: 4.0vw;
		line-height: 6.8vw;
	}
	#top_event .link-block {
		margin-bottom: 4.8vw;
	}
	#top_news {
		position: relative;
		overflow: hidden;
		margin-bottom: 14.4vw;
	}
	#top_news h3 p {
		text-align: left;
	}
	#top_news .symbol {
		top: 0;
		right: -15%;
	}	
	#top_news .content .list {
		width: 100%;
		border-top: 1px solid #000;
		margin-bottom: 9.6vw;
	}
	#top_news .content .list li {
		border-bottom: 1px solid #000;
		padding: 3.2vw 0;
	}
	#top_news .content .list li .info {
		width: 100%;
		display: flex;
		align-items: center;
	}
	#top_news .content .list li .ctitle {
		text-align: center;
		font-size: 3.2vw;
		width: 40%;
		margin-bottom: 2.0vw;
	}
	#top_news .content .list li .ctitle p {
		border: 1px solid #000;
		border-radius: 2.8vw;
		padding: 1.0vw;
	}
	#top_news .content .list li .news-body {
		font-size: 4.8vw;
		font-weight: 700;
		line-height: 8.4vw;
		margin-bottom: 4vw;
	}
	#top_news .content .list li .news-body a {
		color: #000;
	}
	#top_news .content .list li .date {
		font-size: 3.2vw;
		font-weight: 700;
		color: #808080;
	}
	#top_support {
		position: relative;
		overflow: hidden;
		margin-bottom: 14.4vw;
	}
	#top_support .title-block {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 6.4vw;
	}
	#top_support .title-block h2 {
		width: 12vw;
		margin-left: 2.4vw;
	}
	#top_support .title-block h3 {
		width: calc(100% - 14vw);
		text-align: right;
	}
	#top_support .title-block h3 .jp {
		font-size: 4.8vw;
	}
	#top_support .content .logo {
		width: 60%;
		margin: 0 auto 6.4vw auto;
	}
	#top_support .content .figure {
		margin-bottom: 9.6vw;
	}
}
@media screen and (max-width: 400px) {
}
@media screen and (min-width: 769px) {
	h2 {
		font-size: 4.8rem;
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
		color: #f8b42d;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
	h2 .sub {
		font-size: 3.6rem;
		margin-top: 4rem;
	}
	h3 {
		font-size: 4.8rem;
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
		line-height: 6.0rem;
	}
	h3 .jp {
		font-size: 2.8rem;
		line-height: 4.8rem;
		font-weight: 700;
		font-family: "Noto Sans JP", sans-serif;
	}
	.title-text {
		font-weight: 700;
		font-family: "Helvetica", "Inter", sans-serif;
	}
	#top_concept {
		margin-bottom: 2.4rem;
	}
	#top_concept .root-wrapper {
		position: relative;
	}
	#top_concept .symbol {
		left: -10%;
	}
	#top_concept .content {
		padding-top: 200px;
	}
	#top_concept .main-column, #top_why .main-column {
		display: flex;
		justify-content: flex-end;
	}
	#top_concept .main-column .part, #top_why .main-column .part {
		width: 52%;
	}
	#top_concept .main-column .part p, #top_why .main-column .part p {
		font-size: 1.6rem;
		line-height: 3.2rem;
		text-align: justify;
		padding-bottom: 6.4rem;
	}
	#top_event .link-block {
		margin-right: 2.4rem;
	}
	#top_story, #top_why {
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	#top_story .root-wrapper {
	}
	#top_story .symbol, #top_why .symbol {
		right: -5%;
	}
	#top_story .title-block {
		display: flex;
		align-items: center;
		margin: 80px auto 80px auto;
	}
	#top_story .title-block h2 {
		width: 52%;
	}
	#top_story .title-block h3 {
		width: 46%;
		margin-right: 2%;
		text-align: right;
	}
	#top_story .icons {
		display: flex;
		width: 100vw;
		overflow: hidden;
		margin-bottom: 80px;
	}
	#top_story .icons img {
		width: 100%;
	}
	#top_story .icons img:first-child {
		animation: loop 50s -25s linear infinite;
	}
	#top_story .icons img:last-child {
		animation: loop2 50s linear infinite;
	}
	@keyframes loop {
		0% {
			transform: translateX(100%);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes loop2 {
		0% {
			transform: translateX(0);
		}
		to {
			transform: translateX(-200%);
		}
	}
	#top_story .navi, #top_why .navi {
		display: flex;
		justify-content: center;
		margin-bottom: 80px;
	}
	#top_event .navi {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 80px;
	}
	#top_event .form_link {
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}
	#top_event .form_link .link-block {
		margin: 0;
	}
	.content-separator {
		position: relative; 
		overflow: hidden;
	}
	.content-separator img {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 1600px;
		margin-bottom: 4.8rem;
	}
	#top_why .title-block {
		display: flex;
	}
	#top_why .title-block h3 {
		margin-top: -1.2rem;
	}
	#top_why .title-block h2 {
		margin-right: 2.0rem;
	}
	#top_why .content {
		margin-top: -80px;
	}
	#top_why .figure {
		display: flex;
		justify-content: space-between;
		margin-bottom: 4.8rem;
	}
	#top_why .figure li {
		width: 32%;
	}
	#top_event {
		position: relative;
		overflow: hidden;
	}
	#top_event .symbol {
		top: 50%;
		right: -5%;
	}
	#top_event .title-block {
		display: flex;
		align-items: center;
		margin-bottom: 4.8rem;
	}
	#top_event .title-block h2 {
		width: 54%;
		transform: rotate(180deg) translateX(-90%);
	}
	#top_event .title-block h3 {
		width: 30%;
		margin-left: 2.4rem;
	}
	#top_event .title-block .jp {
		width: 100%;
		font-size: 2.0rem;
		line-height: 3.2rem;
	}
	#top_event .content {
		display: flex;
		margin-bottom: 4.8rem;
	}
	#top_event .content .list {
		width: 60%;
		margin-right: 2.4rem;
		border-top: 1px solid #000;
	}
	#top_event .content .list li {
		border-bottom: 1px solid #000;
	}
	#top_event .content .calendar {
		width: calc(40% - 2.4rem);
		font-size: 1.2rem;
		font-weight: 700;
	}
	#top_event .content .list li a {
		color: #000;
	}
	#top_event .content .list li .cell {
		display: flex;
		align-items: center;
		padding: 2.0rem 0; 
	}
	#top_event .content .list li .cell .thumbnail {
		width: 36%;
		margin-right: 24px;
	}
	#top_event .content .list li .cell .thumbnail img {
		width: 100%;
	}
	#top_event .content .list li .cell .event-body {
		width: calc(64% - 24px);
		font-size: 1.1rem;
	}
	#top_event .content .list li .cell .cat-info {
		display: flex;
		align-items: center;
		margin-bottom: 0.6rem;
	}
	#top_event .content .list li .cell .ctitle {
		width: 20%;
		text-align: center;
		font-size: 1.1rem;
	}
	#top_event .content .list li .cell .ctitle p {
		border: 1px solid #000;
		border-radius: 2.0rem;
		padding: 0.4rem;
		margin-right: 1.2rem;
	}
	#top_event .content .list li .cell .date {
		width: calc(80% - 48px);
		font-size: 1.0rem;
		font-weight: 700;
	}
	#top_event .content .list li .cell .icon {
		width: 48px;
	}
	#top_event .content .list li .cell .event-title {
		font-size: 1.6rem;
		font-weight: 700;
		line-height: 2.8rem;
		margin-bottom: 1.6rem;
	}
	#top_event .content .list li .cell .event-tag {
		margin-bottom: 1.6rem;
	}
	#top_event .content .calendar .calendar-head {
		display: flex;
		align-items: center;
	}
	#top_event .content .calendar .calendar-head .calendar-navi {
		width: 14.2857%;
	}
	#top_event .content .calendar .calendar-head .calendar-navi img {
		width: 100%;
	}
	#top_event .content .calendar .calendar-head .title {
		width: calc(100% - 28.5714%);
		text-align: center;
	}
	#top_event .content .calendar table {
		width: 100%;
		text-align: center;
		border: 1px solid #000;
		background-color: #fff;
	}
	#top_event .content .calendar table th, #top_event .content .calendar table td {
		width: 14.2857%;
		border: 1px solid #000;
		text-align: center;
		padding: 1.5rem 0;
	}
	#top_event .content .calendar table th.holiday {
		color: #f8b42d;
	}
	#top_event .content .calendar table td.no-target {
		color: #aaa;
	}
	#top_event .content .calendar table td.active {
		background-color: #f8b42d;
	}
	#top_event .content .calendar table td a {
		display: block;
		width: 100%;
		height: 100%;
		color: #000;
	}
	#top_news {
		position: relative;
		overflow: hidden;
	}
	#top_news .symbol {
		top: 0;
		right: -5%;
	}
	#top_news .root-wrapper {
		display: flex;
		align-items: flex-start;
	}
	#top_news .title-block {
		width: 33%;
	}
	#top_news .title-block .jp {
		margin-top: 2.4rem;
		font-size: 2.0rem;
		line-height: 3.2rem;
	}
	#top_news .content {
		width: 67%;
	}
	#top_news .content .list {
		width: 100%;
		border-top: 1px solid #000;
		margin-bottom: 4.8rem;
		min-height: 460px;
	}
	#top_news .content .list li {
		border-bottom: 1px solid #000;
		display: flex;
		align-items: center;
		padding: 2.0rem 0;
	}
	#top_news .content .list li .info {
		width: 20%;
		margin-right: 2.4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-items: space-between;
	}
	#top_news .content .list li .ctitle {
		text-align: center;
		font-size: 1.1rem;
		width: 100%;
		margin-bottom: 1.0rem;
	}
	#top_news .content .list li .ctitle p {
		border: 1px solid #000;
		border-radius: 2.0rem;
		padding: 0.4rem 1.0rem;
		width: calc(100% - 2.0rem);
	}
	#top_news .content .list li .date {
		font-size: 1.0rem;
		font-weight: 700;
		color: #808080;
	}
	#top_news .content .list li .news-body {
		width: calc(80% - 2.4rem);
		font-size: 1.3rem;
		line-height: 2.2rem;
	}
	#top_news .content .list li .news-body a {
		color: #000;
	}
	#top_news .navi {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 80px;
	}
	#top_support {
		position: relative;
		overflow: hidden;
	}
	#top_support .symbol {
		top: 0;
		left: -5%;
	}
	#top_support .title-block {
		width: 100%;
		display: flex;
		align-items: center;
	}
	#top_support .title-block h2 {
		width: 5.2rem;
		margin-left: 1.2rem;
	}
	#top_support .title-block h3 {
		width: calc(100% - 6.4rem);
		text-align: right;
	}
	#top_support .content {
		margin-bottom: 9.6rem;
	}
	#top_support .content .logo {
		width: 320px;
		margin: 4.8rem auto;
	}
	#top_support .content .figure {
		margin-bottom: 4.8rem;
	}
	#top_support .navi {
		display: flex;
		justify-content: center;
	}
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
	#top_concept h3 {
		margin: -130px 0 80px 80px;
	}
}
@media screen and (min-width: 1200px) {
	#top_concept h3 {
		margin: -130px auto 80px auto;
	}
}
@media screen and (min-width: 1600px) {
	#main-visual {
		max-width: 1360px;
	}
	.symbol {
		height: 800px;
	}
	.symbol img {
		height: 640px;
	}
	#top_concept .symbol {
		left: -10%;
	}
	.content-separator img {
		width: 100%;
	}
}