@charset "utf-8";
/* ===========================================================

	Title: top.css
	Created: 2018-1-11

=========================================================== */
/*


	main-visual
	main-visual2
	top-contens
	main
	top-data
	top-news
	top-banner


=========================================================== */
/* ===========================================================

	#mainvisual

=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500;600&display=swap');

#mainvisual {
    position: relative;
	/* width: 100%; */
    /* min-width: 1240px; */
}
#mainvisual h1 {
	position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}
#mainvisual .main-visual-wrapper{
	width: 100%;
	height: 70vh;
	background-image: url(../img/top/main-visual_bg.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (520px < width < 821px ) {
	#mainvisual h1{
		transform: translate(-50% , -50%)
		scale(1.4);
	}
}
@media screen and (max-width: 820px) {
	#mainvisual {
		margin: 56px 0 0;
		min-width: 320px;
		background-size: auto 400px
	}
	#mainvisual h1 {
		width : auto;
		margin: 0;
		padding: 0;
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 35px;
    	letter-spacing: 2px;
	}
	.sp{
		display: block;
	}
}


/* ===========================================================

	bxslider

=========================================================== */
.bxslider-mainvisual {
	position: relative;
	margin: 0 auto;
	z-index: 10;
}
.bxslider-mainvisual li {
	width: 100%;
	height: 500px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
/* PAGER */
#mainvisual .bx-wrapper {
}
#mainvisual .bx-wrapper .bx-pager,
#mainvisual .bx-wrapper .bx-controls-auto {
	width: 1240px;
	margin: 0 0 0 -600px;
	text-align: left;
	left: 50%;
	bottom: 10px;
}
#mainvisual .bx-wrapper .bx-pager .bx-pager-item,
#mainvisual .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	padding: 5px 0 0;
}
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a {
	background: none;
	text-indent: -9999px;
	display: block;
	width: 60px;
	height: 6px;
	margin: 0 5px 0 0;
	outline: 0;
	border-radius: 0;
	background: #fff;
	opacity: 0.7;
}
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a:hover,
#mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #018ccf;
	opacity: 0.9;
}
@media screen and (max-width: 820px) {
	.bxslider-mainvisual li {
		height: 300px;
	}
	#mainvisual .bx-wrapper .bx-pager,
	#mainvisual .bx-wrapper .bx-controls-auto {
		width: auto;
		margin: 0;
		transform: translateX(-50%);
		display: inline-flex;
    z-index: 99998;
	}
}


/* ===========================================================

	contens

=========================================================== */
#top-contens {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ===========================================================

	main

=========================================================== */
#top-contens main {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}
#top-contens main section:nth-child(odd){
	background-color: var(--beige);
}

/* ===========================================================

	top-topic

=========================================================== */
.top-topic-section {
	width: 100%;
    position: relative;
	padding: 15px 0 15px;
}
.top-topic-outer{
	max-width: 1240px;
	margin: 0 auto;
}
.top-topic-wrap{
	max-width: 1200px;
	margin: 0 20px;
	/* margin: 0 auto; */
	background-color: var(--white);
	height: 96px;
	border-radius: 50px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	padding: 5px 0px;
	box-shadow: 0 0 10px rgba(0, 0 , 0, 0.1);
}
.top-topic-banner{
	transition: all .2s ease-in-out;
}
.top-topic-banner:hover{
	opacity: .8;
}
.top-topic-banner img{
	width: 100%;
	vertical-align: bottom;
}
.top-topic-title{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	color: var(--red);
	padding: 15px 30px 15px 0;
	margin: 0;	
	border-right: 2px solid var(--lightGrey);
}
.top-topic-text p{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	color: var(--red);
	border-radius: 50px;
	border: 1px solid var(--red);
	padding: 2px 50px;
	margin-bottom: 5px;
	font-weight: bold;
}
.top-topic-text span{
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 1px;
}
.top-topic-text .small{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 500;
}
.top-topic-text-detail{
	width: 60%;
	margin-bottom: 0;
	text-align: left;
	font-size: 14px;
	letter-spacing: -0.3px;
}
.top-topic-text-detail a{
	text-decoration: underline;
}
.top-topic-link{
	background-color: var(--red);
	display: flex;
	flex-direction: column;
	color: var(--white);
	border-radius: 50px;
	transition: all .2s ease-in-out;
}
.top-topic-link:hover{
	opacity: .8;
}
.top-topic-link a{
	text-decoration: none;
	color: var(--white);
	padding: 10px 80px;
	position: relative;
}
.top-topic-link a:before{
	content: "FREE";
	width: 65px;
	height: 65px;
	position: absolute;
	top: 4px;
	left: 3px;
	border-radius: 50%;
	background-color: var(--white);
	color: var(--red);
	line-height: 65px;
	font-size: 14px;
	font-size: 1.4rem;
	transition: all .2s ease-in-out;
	text-align: center;
}
.top-topic-link a:hover:before{
	opacity: .8;
}
.top-topic-link a:after{
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 2px var(--white);
	border-right: solid 2px var(--white);
	position: absolute;
	top: 50%;
	right: 10%;
	margin-top: -5px;
	transform: rotate(45deg);
	transition: all .2s ease-in-out;
}
.top-topic-link a:hover:after{
	right: 7%;
}

.top-topic-link p{
	margin-bottom: 5px;
	font-size: 20px;
	font-size: 2.0rem;
	font-weight: bold;
}

.top-topic-link span{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 500;
}

@media screen and (max-width: 1090px) {
	.top-topic-section{
		padding: 15px 15px 15px;
	}
	.top-topic-wrap {
		width: auto;
		min-width: 326px;
		height: auto;
		padding: 15px 10px 15px 10px;
		display: flex;
		flex-direction: column;
		border-radius: 10px;
		max-width: 700px;
		margin: 0 auto;
	}
	.top-topic-title{
		border-right: none;
		border-bottom: 2px solid var(--lightGrey);
		padding: 0 0 13px 0;
		margin-bottom: 15px;
		width: 90%;
	}
	.top-topic-text{
		margin-bottom: 6px;
	}
	.top-topic-link{
		margin-top: 15px;
	}
	.top-topic-text-detail{
		width: 90%;
		font-size: 1.3rem;
	}
}
@media screen and (max-width: 820px) {
	.news-release-list li{
		flex-wrap: wrap;
	}
	.archive-list__body{
		margin-top: 10px;
		width: 100%;
	}
}

.section-button{
	background-color: var(--white);
	border-radius: 50px;
	transition: all .2s ease-in-out;
	display: flex;
	width: 264px;
	justify-content: center;
	align-items: center;
	margin: auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin-top: 20px;
}
.section-button:hover{
	opacity: .8;
}
.section-button a{
	display: block;
	text-decoration: none;
	color: var(--black);
	padding: 20px 70px;
	position: relative;
	font-size: 16px;
}
.seminar-button {
	margin-top: 10px;
}
.section-button a:after{
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 2px var(--red);
	border-right: solid 2px var(--red);
	position: absolute;
	top: 50%;
	right: 9%;
	margin-top: -5px;
	transform: rotate(45deg);
	transition: all .2s ease-in-out;
}
.section-button a:hover:after{
	right: 7%;
}

@media screen and (max-width: 820px) {
	.section-button{
		margin-top: 40px;
	}
	.section-button a{
		font-size: 1.6rem;
	}
}
/* ===========================================================

	top-news

=========================================================== */
.top-news-section{
	width: 100%;
	padding: 85px 0 70px 0;
}
.top-news{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

.top-title small{
	display: block;
	max-width: 1240px;
	text-align: left;
	font-size: 40px;
	font-size: 4.0rem;
	color: var(--red);
	line-height: 20px;
	letter-spacing: 1px;
	font-family: 'Lato', sans-serif;
	font-weight: bold;
	margin-bottom: 10px;
	position: relative;
	position: relative;
	padding-left: 30px;
}
.top-title small:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	border-top: solid 2px var(--red);
	width: 20px;
	z-index: 1;
}


.top-title h2 {
	color: var(--black);
	text-align: left;
	border: none;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 30px;
	letter-spacing: 1px;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	margin-bottom: 50px;
	display: flex;
	flex-direction: column-reverse;
	padding-left: 0;
}

.top-title h2 span{
	position: relative;
	display: inline-block;
	padding: 10px 0 0 32px;
}

.news-release-list{
	font-size: 16px;
	text-align: left;
}
.news-release-list li{
	margin-bottom: 1em;
	padding-bottom: 1em;
	display: flex;
	border-bottom: 1px solid var(--lightGrey);
}
.news-release-list li:last-child{
	border-bottom: none;
}
.news-release-list .date{
	margin-right: 1.5em;
	min-width: 7.5em;
	display: inline-block;
	flex-shrink: 0;
}

.news-release-list .ic-top-news{
	background-color: #2F6FB7;
}
.news-release-list .ic-top-seminar{
	background-color: #9BBB3C;
}
.news-release-list .ic-top-info{
	background-color: #e09710;
}
.news-release-list .icon{
	margin-right: 1.5em;
	width: 116px;
	line-height: 1px;
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	display: inline-block;
	padding: 13px;
	flex-shrink: 0;
	border-radius: 50px;
	color: var(--white);
}

@media screen and (max-width: 820px) {
	.top-news-section{
		width: 100%;
		padding: 70px 32px 70px 32px;
	}
	.top-news {
		width: auto;
		padding: 0;
	}
	.top-news h2 {
		margin-bottom: 30px;
	}
	.top-news h2 span {
		padding: 0 0 0 30px;
	}
	.top-news ul {
		margin: 0;
	}
	.top-news ul li {
		margin: 0 0 10px;
		width: 100%;
	}
	.top-news dl {
		text-align: left;
    	margin: 0 0 20px;
	}
	.top-news dt {
		float: none;
		width: 14em;
		margin: 0 0 5px;
	}
	.top-news dd {
		margin: 0 0 15px;
		padding: 0;
	}
	.top-topics dd {
		padding: 0!important;
 	}
	.top-topics{
		margin:20px 10px 10px 10px;
	}
	.top-title small{
		width: auto;
		font-size: 2em;
		word-break: break-word;
		line-height: 35px;
		margin-bottom: 0;
		padding-left: 30px;
		margin-left: 0;
	}
	.top-title small:before{
		/* top: 15%; */
	}
	.top-title h2 span{
		padding: 0 0 0 32px;
		font-size: 1.4rem;
		font-weight: bold;
	}
}
/* ===========================================================

	top-participate

=========================================================== */
.top-participate-section{
	width: 100%;
	padding: 0 0 70px 0;
}
.top-participate{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}
.top-participate h2{
	transform: translateY(-10px) !important;
}
.participate-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.participate-list li{
	margin-right: 16px;
	margin-bottom: 12px;
}
.participate-list li:nth-child(4n){
	margin-right: 0;
}

/* item-wrap */
.item_wrapper {
	list-style-type: none;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
	padding: 0;
	/* margin: 0 1vw 1vw; */
  }
  .item{
	width: calc(100% / 4 - 2 * 8px);
	margin: 0 8px 16px;
	transition: all .2s ease-in-out;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	position: relative;
  }
  .item:hover{
	filter: brightness(0.95);
  }
  .item img{
	border-radius: 5px;
  }
  /* .item span{
	position: absolute;
	bottom: 25px;
	left: 0;
	right: 0;
	font-size: 12px;
  } */


  @media screen and (max-width: 1270px) {
	.top-participate{
		width: auto;
		
	}
	.item {
	  width: calc(100% / 3 - 2 * 8px);
	}
  }
  @media screen and (max-width: 425px) {
	.top-participate{
		width: auto;
		padding: 0;
	}
	.item {
	  width: 48%;
	}
  }
  
  /* @media screen and (min-width: 425px) {
	.item {
	  width: calc(100% / 4 - 2 * 1vw);
	}
  }
  
  @media screen and (min-width: 980px) {
	.item {
	  width: calc(100% / 5 - 2 * 1vw);
	}
  } */
  
  .item_wrapper img {
	width: 100%;
	vertical-align: bottom;
  }
  @media screen and (max-width: 820px) {
	.top-participate-section{
		width: 100%;
		padding: 0 32px 70px 32px;
	}
	.top-participate{
		width: auto;
		padding: 0;
	}
	.top-participate h2 {
		transform: translateY(-22px) !important;
		margin-bottom: 20px;
	}
	.top-participate small:before{
		top: 30%;
	}
  }
/* ===========================================================

	top-seminar

=========================================================== */
.top-seminar-section{
	width: 100%;
	padding: 85px 0 70px 0;
}
.top-seminar{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: content-box;
}
.top-seminar h2{
		margin-bottom: 70px;
}
.seminar-list{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -16px;
}
.seminar-list .card-wrap{
	display: block;
	width: calc(33.333333% - 32px);
    margin: 0 16px 20px;
}
.seminar-list .card:hover{
	filter: brightness(0.95);
}
.seminar-list .card-wrap:last-child{
	margin-right: 0;
}
.seminar-list .card-wrap a{
	text-decoration: none;
}
.seminar-list .card{
	box-shadow: 0 0 10px rgba(0, 0 , 0, 0.5);
	border-radius: 10px;
	background-color: #d1d1d1;
	margin-bottom: 15px;
	transition: all .2s ease-in-out;
}
.movie{
	background-color: #d1d1d1;
	border-radius: 10px;
}
.movie img{
	width: 100%;
	vertical-align: bottom;
	border-radius: 10px 10px 0 0;
}
.movie iframe{
	border-radius: 10px 10px 0 0;
}
/* .company-title{
	display: block;
	background-color: var(--red);
	padding: 4px;
	color: var(--white);
	margin-bottom: 0;
} */
.company-detail{
	background-color: #f1f1f1;
	padding: 10px 0;
	letter-spacing: 1px;
}
.company-name{
	display: block;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0px;
}
.seminar-date{
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 0px;
}
.seminar-date .number{
	color: var(--red);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-family: 'Lato', sans-serif;
}
/* .seminar-link{
	background-color: #fff0f0;
	color: var(--red);
	padding: 10px 30px 10px 10px;
	border: 2px solid var(--red);
	border-radius: 50px;
	width: fit-content;
	margin: 0 auto;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 700;
	position: relative;
}

.seminar-link:before{
	content: "";
	position: absolute;
	right: 13px;
	width: 10px;
	top: 50%;
	height: 2px;
	background: var(--red);
}
.seminar-link:after{
	content: "";
	position: absolute;
	right: 12px;
	width: 5px;
	top: 43%;
	height: 5px;
	border-top: 2px solid var(--red);
	border-right: 2px solid var(--red);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
} */
.company-banner{
	overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	height: 105px;
	background-color: var(--white);
	padding: 10px;
	border-radius: 0 0 10px 10px;
}
.company-banner img{
	width: 60%;
}

.seminar-download a{
	text-decoration: underline !important;
	color: var(--red);
	font-size: 14px;
}
.seminar-download .PDF-icon{
	display: inline-block;
	color: var(--white);
	background-color: var(--red);
	margin-left: 10px;
	padding: 3px 10px 3px 10px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 12px;
	border-radius: 3px;
}
.seminar-download .PDF-icon .fa-solid{
	margin-left: 5px;
	font-weight: 600;
}

@media screen and (max-width: 1090px) {
	.seminar-list .card-wrap{
		width: calc(50% - 32px);
	}
	.company-banner{
		height: 90px;
	}
}

@media screen and (max-width: 820px) {
	.top-seminar-section{
		width: 100%;
		padding: 70px 32px;
	}
	.top-seminar{
		width: 100%;
		margin: auto;
		padding: 0;
	}
	.top-seminar h2 {
		margin-bottom: 40px;
	}
	.top-seminar small:before{
		top: 25%;
	}
	.seminar-list{
		flex-direction: column;
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		padding-top: 0;
	}
	.seminar-list .card-wrap{
		width: 100%;
		margin: 0 auto;
	}
	.seminar-list .card{
		width: 100%;
		margin-bottom: 15px;
	}
	.movie{
		width: 100%;
	}
	.movie iframe{
		width: 100%;
	}
	.company-detail{
		padding: 10px;
	}
	.company-name{
		font-size: 1.4rem;
	}
	.company-date{
		font-size: 1.2rem;
	}
	.seminar-date .number{
		font-size: 2rem;
	}
	.company-banner{
		height: auto;
	}
	.seminar-link{
		margin-bottom: 30px;
	}
	.seminar-download{
		margin-bottom: 50px;
	}
	.seminar-button{
		margin-top: 0;
	}
}

@media screen and (max-width: 463px) {
	.company-banner{
		height: auto;
		min-height: 65px;
	}
}
/* ===========================================================

	top-banner

=========================================================== */
.top-banner-section {
	width: 100%;
}
.top-banner{
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: content-box;
}
.organizer {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: right; */
	background-color: var(--beige);
	padding: 40px 0px 40px 0px;
	margin-bottom: 0;
	/* width: 900px; */
}
.cooperator{
	display: flex;
	margin-bottom: 0;
	padding: 40px 0px 40px 0px;
	justify-content: left;
	/* width: 300px; */
}
.top-banner li {
	width: 248px;
	padding: 35px 0 20px;
	position: relative;
	transition: all .2s ease-in-out;
	border-radius: 5px;
}
/* .top-banner li:last-child {
	width: 220px;
	
} */
.top-banner li:hover {
	filter: brightness(0.95);
}
.top-banner li em {
	position: absolute;
	top: 7px;
	left: 0;
	display: inline-block;
	border-left: solid 4px var(--grey);
	height: 12px;
	line-height: 12px;
	font-size: 16px;
	padding: 0 0 15px 10px;
	color: var(--grey);
}
.top-banner li img{
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.pc { display: block !important; }
.sp { display: none !important; }
/* responsive */
@media (820px < width < 1028px ) 
/* 1216 */
{
	#mainvisual h1{
		width: 100%;
	}
	#mainvisual h1 img{
		width: 100%;
		height: auto;
	}
	.top-banner{
		padding: 0 20px;
	}
}
@media screen and (max-width: 820px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  .top-banner{
	padding: 0;
  }
  .top-banner ul {
		display: block;
		width: auto;
		margin: 0 auto;
		padding: 48px 32px;
	}
	.top-banner li {
		width: 100%;
		margin: 0 auto 10px;
		padding-bottom: 0;
	}
	.top-banner li img {
		max-width: 380px;
		width: 100%;
		height: auto;
	}
	.top-banner li:nth-child(2),
	.top-banner li:nth-child(3){
		padding-top: 0;
	}
	.top-banner .cooperator{
		padding-top: 0;
	}
}

@media screen and (max-width: 820px) {
	.top-banner-section {
		width: 100%;
		background: none;
	}
	.top-banner{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
}
.js-fadein {
	opacity: 0;
	transform: scale(0.94,0.94);
	transition: 3s ease;
   }
   .js-scrollin {
	opacity: 1 !important;
   }