@charset "UTF-8";

/*------------------------------------------------
	WEBフォント
--------------------------------------------------*/

@font-face {
	font-family: 'MyWebFont';
	src: url('../font/websymbolsligaregular.eot'); /* IE9 Compat Modes */
	src: url('../font/websymbolsligaregular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../font/websymbolsligaregular.woff') format('woff'), /* Modern Browsers */
		 url('../font/websymbolsligaregular.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('../font/websymbolsligaregular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/*------------------------------------------------
	ビジュアル
--------------------------------------------------*/

.visual_block {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1920px;
	margin: 0px auto;
}

.visual_block::after {
	background: transparent url("../images/common/cover04.png") no-repeat center bottom;
	background-size: 100% 100%;
	bottom: 0px;
	content: "";
	height: 0;
	left: 0;
	padding-top: 5%;
	position: absolute;
	width: 100%;
}

#visual_sp {
	display: none;
}

/*------------------------------------------------
	20周年時ビジュアル
--------------------------------------------------*/
.visual_block {
    height: 740px;	
}
.visual_block::after {
	display: none;
}

#visual-20_01 {
    width: 100%;
    height: 740px;
    background: #2aa1e5;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 10;
}
#visual-20_01_img {
	width: 612px;
	height: auto;
	display: none;
}

#visual-20_02 {
	position: absolute;
    top: 0;
    left: 0;
    height: 740px;
    width: 100%;
    background: url(../images/top/20th/bg.jpg) repeat-x center top/auto 100%;
}

#visual-20_inner {
    width: 960px;
    height: 740px;
    position: absolute;
    top: 0;
    z-index: 9;
    right: 0;
    left: 0;
    margin: auto;
}

#visual-20_03 {
    width: 526px;
    height: 181px;
    position: absolute;
    top: 280px;
    left: 500px;
	display: none;
}
#visual-20_03 img {
	width: 526px;
	height: auto;
	display: none;
}

/* ボックススライドイン */
.box {
	width: 100%;
	height: 200px;
	margin: 0 0 2% 0;
	overflow: hidden;
}
.box .boxInner {
	width: inherit;
	height: inherit;
	line-height: 200px;
	font-size: 1.5em;
	text-align: center;
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
}

/* 「boxInner」をスライドインする */
@keyframes play {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

/* マスク要素をスライドアウトする */
@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}

/* スライドインを動作するclass */
.isPlay {
  animation-name: play;
  animation-duration: .9s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.8,0,.5,1);
  position: relative;
  opacity: 1 !important;
}

/* isPlayの疑似要素にマスクとマスクを外すアニメーションを設定  */
.isPlay:before {
	animation-name: maskOut;
	animation-duration: .9s;
	animation-delay: .9s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(.8,0,.5,1);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #4cc5f6;
	background: -moz-linear-gradient(left,  #4cc5f6 0%, #0091cb 100%);
	background: -webkit-linear-gradient(left,  #4cc5f6 0%,#0091cb 100%);
	background: linear-gradient(to right,  #4cc5f6 0%,#0091cb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cc5f6', endColorstr='#0091cb',GradientType=1 );

}

.visual-20_04 {
    width: 750px;
    height: 712px;
    position: absolute;
    top: 40px;
    left: -288px;
	opacity: 0;
}
.visual-20_04 img {
	width: 750px;
	height: auto;
}

.Slide {
	animation: SlideIn 2s;
}
@keyframes SlideIn {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.opacity_1 {
	opacity: 1;
}

#visual_20 {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	background-color: #2b526a;
	transition-delay: 3s;
}
@keyframes fadeIn {
	0% {
		transition-delay: 3s;
		opacity: 0;
	}
	100% {
		transition-delay: 3s;
		opacity: 1;
	}
}

#visual_20 ul {
	animation: fadeIn_02 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn_02 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#bird {
    position: absolute;
    left: 629px;
    top: 104px;
    width: 29px;
    height: auto;
    animation-name: bird_anime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
@keyframes bird_anime {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

/* タブレット表示時 */
@media screen and (max-width: 1110px) {
	.visual_block {
		height: 60vw;
		width: 100%;
	}
	#visual-20_01 {
		height: 60vw;
	}
	#visual-20_inner {
		width: 100%;
		height: 60vw;
	}
	#visual-20_03 {
		width: 43%;
		height: 17vw;
		top: 35%;
		left: 54.5%;
	}
	#visual-20_03 img {
		width: 100%;
	}
	.visual-20_04 {
		width: 50%;
		height: auto;
		top: 12%;
		left: 2%;
	}
	.visual-20_04 img {
		width: 100%;
	}
	#visual-20_02 {
		height: 60vw;
		width: 100%;
		background: url(../images/top/20th/bg.jpg) repeat-x 30% top/auto 100%;
	}
	.box .boxInner {
		width: 100%;
	}
	#bird {
    left: 84%;
    top: 15%;
    width: 4%;
}

}

/* スマホ表示時 */
@media screen and (max-width: 800px) {
	.visual_block {
		height: calc(116vw + 20px);
		margin: 10px 0 0;
	}
	#visual-20_inner {
		width: 100%;
		height: auto;
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		margin: auto;
		display: flex;
		flex-direction: column-reverse;
	}
	#visual-20_01 {
		position: relative;
		height: 100%;
	}
	#visual-20_01_img {
		width: 90%;
	}
	#visual-20_02 {
		height: 100%;
		width: 100%;
		background: url(../images/top/20th/bg_sp_01.jpg) no-repeat center top/100% auto,
			url(../images/top/20th/bg_sp_02.jpg) no-repeat center bottom/100% auto;
	}
	#visual-20_03 {
		width: 85%;
		top: 81vw;
		left: 0;
		margin: 0 auto;
		right: 0;
		padding: 0 0 30vw;
		height: auto;
	}
	#visual-20_03 img {
		width: 100%;
	}
	.isPlay:before {
		width: 118%;
	}
	.box .boxInner {
		height: 30vw;
	}
	.visual-20_04 {
		width: 85%;
		height: auto;
		top: 0vw;
		left: 0;
		right: 0;
		margin: 30px auto 0;
	}
	.visual-20_04 img {
		width: 100%;
		height: auto;
	}

}


/*------------------------------------------------
	共通
--------------------------------------------------*/

.block .common_list li {
	float: left;
}

.block .common_list li:last-child {
	padding-right: 0px;
}

.block .common_list li a {
	display: block;
	text-decoration: none;
	color: #1e445b;
}

.block .common_list .icon img {
	width: 140px;
	display: block;
	margin: 0px auto;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
}

.block .common_list a:hover .icon img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	opacity: 0.8;
}

.common_list h3 {
	text-align: center;
	font-size: 160%;
	padding: 20px 0px 10px;
}

.common_list .about {
	padding: 0px 20px 0px;
	font-size: 90%;
	text-align: center;
	line-height: 1.6;
}

.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	opacity:0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
		transform:translateY(30px);
  }

  to {
    opacity: 1;
		transform:translateY(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
		transform:translateY(30px);
  }

  to {
    opacity: 1;
		transform:translateY(0px);
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*------------------------------------------------
	事業内容
--------------------------------------------------*/

.service_block {
	width: 100%;
	position: relative;
	z-index: 1;
	padding-top: 50px;
}

/*
.service_block::after {
	background: transparent url("../images/top/cover02.svg") no-repeat center bottom;
	background-size: 3000px auto;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 8%;
	position: absolute;
	width: 100%;
}
*/

/*
.service_block::after {
	background: transparent url("../images/common/cover02.png") no-repeat center bottom;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 6%;
	position: absolute;
	width: 100%;
}
*/

.service_block .contents li {
	width: 31.333%;
	padding-right: 3%;
}

.service_block .contents ul {
	padding: 55px 0px 0px;
}

/*------------------------------------------------
	プレスリリース
--------------------------------------------------*/

.news_block {
	width: 100%;
	background-color: #ecf1f5;
	position: relative;
	z-index: 1;
}

/*
.news_block::after {
	background: transparent url("../images/top/cover03.svg") no-repeat center bottom;
	background-size: 3000px auto;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 8%;
	position: absolute;
	width: 100%;
}
*/

/*
.news_block::after {
	background: transparent url("../images/top/cover01.jpg") no-repeat center bottom;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 6%;
	position: absolute;
	width: 100%;
}
*/

.news_block .title_block {
	padding-bottom:20px;
}

.news_block .title_block h2 {
	margin-bottom: 0px;
}

.news_block .more {
	margin-top: 20px;
}

.news_block .more a {
	width: 170px;
	padding: 6px 0 4px;
}

/*------------------------------------------------
	採用情報
--------------------------------------------------*/

.recruit_block {
	background: url(../images/top/recruit_bg.jpg) no-repeat center top;
	height: 548px;
	padding-bottom: 0px;
}

/*
.recruit_block::after {
	background: transparent url("../images/top/cover02.svg") no-repeat center bottom;
	background-size: 3000px auto;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 8%;
	position: absolute;
	width: 100%;
}
*/

/*
.recruit_block::after {
	background: transparent url("../images/top/cover02.png") no-repeat center bottom;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 6%;
	position: absolute;
	width: 100%;
}
*/

.recruit_block .contents ul {
	padding-top: 50px;
}

.recruit_block .contents li {
	width: 25%;
}

/*------------------------------------------------
	企業活動
--------------------------------------------------*/

.activity_block {
	background: url(../images/top/activity_bg.jpg) no-repeat center top;
	color: #fff;
}

/*
.service_block::after {
	background: transparent url("../images/top/cover02.svg") no-repeat center bottom;
	background-size: 3000px auto;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 8%;
	position: absolute;
	width: 100%;
}
*/

/*
.activity_block::after {
	background: transparent url("../images/common/cover03.png") no-repeat center bottom;
	background-size: 100% 100%;
	bottom: 0;
	content: "";
	height: 0;
	left: 0;
	padding-top: 6%;
	position: absolute;
	width: 100%;
}
*/

.activity_block .title_block {
	color: #fff;
}

.activity_block .common_title {
	margin-bottom: 45px;
}


.activity_block .contents li {
	width: 31%;
	margin-right: 3.5%;
	float: left;
	background-color: rgba(239, 244, 246, 0.9);
	position: relative;
}

/*
　170530 アスリートへの支援活動終了。コンテンツセンターゾロエの為追加
*/
.activity_block .contents li:first-child {
	margin-left: 18%;
}

.activity_block .contents li:last-child {
	margin-right: 0px;
}

.activity_block .contents li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #2b526a;
	padding-bottom: 25px;
}

.activity_block .contents a .icon {
	width: 100%;
	height: 209px;
	overflow: hidden;
}

.activity_block .contents a .icon img {
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 1;
	display: block;
}

.activity_block .contents a:hover .icon img {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	opacity: 0.8;
}

.activity_block .contents li .sp {
	display: none;
}

.activity_block .contents li img {
	width: 100%;
}

.activity_block .contents li .arrow {
	position: absolute;
	top: 193px;
	left: 133px;
	z-index: 10;
}

.activity_block .contents li .arrow02,
.activity_block .contents li .arrow03 {
	position: absolute;
	top: 48px;
	z-index: 10;
}

.activity_block .contents li .arrow02 {
	left: 112px;
}

.activity_block .contents li .arrow03 {
	right: 112px;
}

.activity_block .contents li .arrow img,
.activity_block .contents li .arrow02 img,
.activity_block .contents li .arrow03 img {
	width: 30px;
	height: 30px;
}

.activity_block .contents li .inner {
	width: 100%;
	padding-top: 25px;
}

.activity_block .contents li h3 {
	font-size: 140%;
	margin-bottom: 10px;
}

.activity_block .contents li .about {
	font-size: 90%;
}


.activity_block .contents li .inner .br_sp{
	display:block;
}

/*------------------------------------------------
	交通アクセス
--------------------------------------------------*/

.access_block {
	padding-bottom: 0px !important;
}

.access_block .col-lg-12 {
	background: #fff url(../images/top/access_bg.jpg) no-repeat right bottom;
	padding-bottom: 190px;
}

/*------------------------------------------------
	TOPページビジュアル画像のスライドショー
--------------------------------------------------*/

.slide {
	overflow: hidden;
	width: 100%;
	height: 430px;
	background: #fff;
	max-height: 430px;
	overflow: hidden;
}

#visual_sp.slide {
	height: 400px;
	max-height: 400px;
}

.slide ul {
	position: relative;
	max-width: 1920px;
	margin: 0px auto;
}

#visual_sp.slide ul {
	max-width: 800px;
}

.slide li {
	position: absolute;
	top: 0px;
	left: 50%;
	z-index: 0;
	opacity: 0;
	/*
	transform: scale(1.04);
	-webkit-transform: scale(1.04);
*/
	width: 100%;
	margin-left: -960px;
	max-width: 1920px;
}

#visual_sp.slide li {
	left: 0px;
	margin-left: 0px;
	max-width: 800px;
}

.slide li:first-child {
	opacity: 1;
}

#visual_sp.slide li img {
	width: 110%;
}

/*
@keyframes zoom {
	0% {
		transform: scale(1);
	}

	40% {
	  transform: scale(1.04);
	}

	100% {
	  transform: scale(1.04);
	}
}

@-webkit-keyframes zoom {
	0% {
		-webkit-transform: scale(1);
	}

	40% {
	  -webkit-transform: scale(1.04);
	}

	100% {
	  -webkit-transform: scale(1.04);
	}
}

.slide li.active {
  animation: 5s ease 0s alternate none 1 zoom;
	-webkit-animation: 5s ease 0s alternate none 1 zoom;
	transform: scale(1.04);
	-webkit-transform: scale(1.04);
}
*/

#ball {
	left: 50%;
  position: absolute;
	bottom: 25px;
  z-index: 11;
}

#ball li {
	background: url(../images/top/slide/ball.svg) no-repeat 0px 0px;
	background-size: 15px 30px;
	width: 15px;
	height: 15px;
	display: inline-block;
	margin-right: 15px;
}

#ball li:last-child {
	margin-right: 0px;
}

#ball li.active,
#ball li:hover {
	background-position: 0px -15px;
}

#ball li:hover {
	cursor: pointer;
}

@media screen and (max-width: 1023px) {

	.recruit_block {
		background: #f6edcb url(../images/top/recruit_bg02.jpg) no-repeat center top;
		height: auto;
		padding-bottom: 50px;
	}

	.recruit_block .col-lg-12 {
		padding: 0px;
		width: 100%;
	}

	.recruit_block .col-lg-12 .common_title {
		width: 90%;
		padding: 0px 5%;
	}

	.recruit_block .contents ul {
		background-color: rgba(255, 255, 255, 0.5);
	}

	.recruit_block .contents li {
		/*width: 50%;*/
		margin-bottom: 50px;
	}

	.activity_block .contents li .inner .br_sp{
		display:none;
	}

}

@media screen and (max-width: 800px) {

	#visual_pc {
		display: none;
	}

	#visual_sp {
		display: block;
	}

	#ball {
		bottom: 10px;
	}

	.activity_block .contents li .inner .br_sp{
		display:none;
	}
}
@media screen and (max-width: 640px) {

	.block .common_list li {
		float: none;
		padding-right: 0;
		margin: 0px auto 50px;
		width: 90%;
		padding: 0px 5% !important;
	}

	.service_block .common_list li {
		width: 100%;
		padding: 0px 0% !important;
	}

	.block .common_list li:last-child {
		margin-bottom: 0px;
	}

	.block .common_list li .icon {
		float: left;
		width: 35%;
		padding-right: 3%;
	}

	.block .common_list li .icon img {
		width: 100%;
	}

	.block .common_list li .inner {
		float: left;
		padding:0px;
		width: 61%;
	}

	.block .common_list li h3,
	.block .common_list li .about {
		text-align: left;
		padding: 0px;
	}

	.block .common_list li h3 {
		margin-bottom: 10px;
	}

	.news_block .more {
		padding-top: 10px;
	}

	.recruit_block {
		background: #f6edcb url(../images/top/recruit_bg03.jpg) no-repeat center top;
		height: auto;
		padding-bottom: 50px;
	}

	/*コンテンツが2つの場合左のマージンを0に*/
	.activity_block .contents li:first-child {
		margin-left: 0%;
	}
	
	.recruit_block .contents li:last-child {
		margin-bottom: 50px;
	}

	.activity_block {
		background: url(../images/top/activity_bg02.jpg) no-repeat center top;
		padding-bottom: 0px;
	}

	.activity_block .col-lg-12 {
		width: 100%;
		padding: 0px;
	}

	.activity_block .col-lg-12 .common_title {
		width: 90%;
		padding: 0px 5%;
	}

	.activity_block .contents li {
		width: 100%;
		margin-right: 0%;
		float: none;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.activity_block .contents li a {
		text-align: left;
		padding-bottom: 0px;
		background-color: #e8f2f7;
		display: table;
	}

	.activity_block .contents li .pc {
		display: none !important;
	}

	.activity_block .contents li .sp {
		display: block;
	}

	.activity_block .contents li .icon {
		display: table-cell;
		width: 40%;
		line-height: 1;
	}

	.activity_block .contents li a img {
		display: block;
	}

	.activity_block .contents li .inner {
		display: table-cell;
		width: 60%;
		vertical-align: middle;
		line-height: 1;
		padding-top: 0px;
	}

	.activity_block .contents li .icon img {
		margin-left: -1px;
	}

	.activity_block .contents li .inner h3 {
		font-size: 120%;
		margin-bottom: 0px;
		padding: 0px 7%;
	}

	.activity_block .contents li .inner .about {
		padding: 0px 7%;
	}

	.activity_block .contents li:nth-child(even) a {
		background-color: #fff;
	}

	.activity_block .contents li:nth-child(even) .icon img {
		margin-left: 0px;
	}

	.activity_block .contents li .inner .br_sp{
		display:none;
	}
}

@media screen and (max-width: 479px) {
	.recruit_block {
		background: #f6edcb url(../images/top/recruit_bg04.jpg) no-repeat center top;
		height: auto;
		padding-bottom: 50px;
	}

	.recruit_block .contents ul {
		background-color: rgba(255, 255, 255, 0.0);
	}

	.access_block .col-lg-12 {
		background: #fff url(../images/top/access_bg.jpg) no-repeat right bottom;
		background-size: auto 200px;

	}

	.activity_block .contents li .inner .br_sp{
		display:none;
	}
}