@charset "UTF-8";
p,li{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
em{
	font-style: normal;
}
:root{
	--maincol: #378A8D;
	--accentcol: #D0B130;
	--Barlow: 'Barlow', sans-serif;
}
body{
	opacity: 0;
	background: #F7F7F7;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	body{
		padding-top: 90px;
	}
	main{
		padding-bottom: 150px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	body{
		padding-top: 70px;
	}
	main{
		padding-bottom: 80px;
	}
}


/*================================
	Link Button Style
================================*/
main > .goinfo a,
#bottomnav .goinfo a{
	display: block;
	position: relative;
	margin-left: auto;margin-right: auto;
	background: var(--accentcol);
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	color: #fff;
}
.goinfo a::before,
main #related span::before,
#bottomnav .goinfo a::before{
		content: '';
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		width: 2rem;
		height: 1px;
		background: #fff;
}
.goinfo a::after,
main #related span::after,
#bottomnav .goinfo a::after{
		content: '';
		display: block;
		width: 4px;
		height: 4px;
		background: #fff;
		border-radius: 100%;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
}
.goinfo a:hover::after,
main #related a:hover span::after{
  animation: linkbtn 1.5s infinite cubic-bezier(0.61, 1, 0.88, 1);
}
	#bottomnav{
		display: none !important;
	}
@keyframes linkbtn {
  0% {
    opacity: 1;
    right: calc(2rem + 24px);
  }
  60% {
    right: 20px;
    opacity: 1;
  }
  100% {
    right: 20px;
    opacity: 0;
  }
}



/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main > .goinfo a{
		max-width: 360px;
		padding: 25px 20px;
		font-size: 20px;
	}
	#pageheader + .goinfo a{
		margin-top: 40px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main > .goinfo a{
		width: 90%;
		max-width: 360px;
		padding: 20px 20px;
		font-size: 18px;
	}
	#pageheader + .goinfo a{
		margin-top: 40px;
	}
	#bottomnav .goinfo{
		width: 100%;
		position: fixed;
		left: 0;bottom: 0;
		z-index: 999;
		padding: 20px 0;
		background: rgba(55, 138, 141, .6);
	}
	main > .goinfo a,
	#bottomnav .goinfo a{
		width: 90%;
		max-width: 360px;
		padding: 15px 20px;
		font-size: 18px;
		line-height: 1;
	}
}





/*================================
	Grobal
================================*/
#grobalnav {
	display:flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	position: fixed;
	width: 100%;
	top: 0;left: 0;
	z-index: 100;
	background: var(--maincol);
}
#grobalnav *{
	color: #fff;
}
#grobalnav .goinfo a{
	display: block;
	position: relative;
	background: var(--accentcol);
	text-align: center;
	font-weight: bold;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	#grobalnav {
		height: 90px;
		padding-left: 3%;
	}
	#grobalnav .logo{
		width: 186px;
	}
	#grobalnav .inner{
		width: calc(100% - 200px);
		display:flex;
		display: -webkit-flex;
		-webkit-justify-content: flex-end;
		-webkit-align-items: center;
		align-items: center;
	}
	#grobalnav .gnavlist {
		display:flex;
		display: -webkit-flex;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		-webkit-align-items: center;
		align-items: center;
		margin-right: 40px;
	}
	#grobalnav .gnavlist li{
		font-size: 14px;
		font-weight: bold;
	}
	#grobalnav .gnavlist li:not(:last-of-type){
		margin-right: 40px;
	}
	#grobalnav .goinfo a{
		width: 300px;
		height: 90px;
		padding-right: 20px;
		font-size: 20px;
		line-height: 90px;
	}
	#grobalnav .menu,
	#grobalnav .infolist{
		display: none;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	#grobalnav {
		height: 70px;
		padding-left: 5%;
	}
	#grobalnav .logo img{
		height: 36px;
	}
	#grobalnav .inner{
		display: none;
		width: 100vw;
		height: 100vh;
		padding-top: 60px;
		position: fixed;
		left: 0;top: 0;
		z-index: 999;
		background: var(--maincol);
	}
	#grobalnav .gnavlist {
		width: 85%;
		margin: 0 auto;
	}
	#grobalnav .gnavlist li{
		padding: 10px 0;
		border-bottom: 1px solid  #fff;
		font-size: 14px;
		font-weight: bold;
	}
	#grobalnav .gnavlist li a{
		display: block;
		padding: 10px 0;
		font-size: 14px;
		line-height: 1;
	}
	#grobalnav .goinfo a{
		width: 85%;
		margin: 40px auto 0;
		padding: 20px;
		border-radius: 5px;
		font-size: 18px;
		line-height: 1;
	}
	#grobalnav .infolist {
		width: 85%;
		position:absolute;
		left:50%;bottom:30px;
		-webkit-transform:translateX(-50%);
		-moz-transform:translateX(-50%);
		transform:translateX(-50%);
		text-align: center;
	}
	#grobalnav .infolist li{
		display: inline-block;
		font-size: 10px;
	}
	#grobalnav .infolist li a{
		color: #fff;
	}
	#grobalnav .infolist li:not(:last-of-type)::after{
		content: "|";
		margin: 0 .5em 0 1em;
	}
  #grobalnav .menu {
		position: fixed;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    transition: .5s;
    font-size: 0;
    text-indent: -9999px;
  }
	#grobalnav .menu::before,
	#grobalnav .menu::after{
		content: "";
	  display: block;
	  background: #fff;
	  width: 18px;
	  height: 2px;
	  position: absolute;
	  right: 0;
	  left: 0;
	  margin: -1px auto 0;
	  transition: transform .3s;
	}
	#grobalnav .menu::before {
	  top: calc(50% - 4px);
	}
	#grobalnav .menu::after {
	  top: calc(50% + 4px);
	}
	#grobalnav .menu.active::before {
	  top: 50%;
	  transform: rotate(45deg);
	}
	#grobalnav .menu.active::after {
	  top: 50%;
	  transform: rotate(135deg);
	}
}




/*================================
	Page Header
================================*/
#pageheader {
	position: relative;
}
#pageheader::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(55, 115, 141, .7);
}
#pageheader *{
	color: #fff;
}
#pageheader .details{
	position:absolute;
	z-index: 3;
}
#pageheader h1,
#pageheader h1 *{
	line-height: 1;
}
#pageheader h1{
	margin: 0 auto;
	font-weight: bold;
}
#pageheader .note{
	font-weight: bold;
	letter-spacing: 0;
}
#pageheader .note em{
	color: #E3FF84;
}
#pageheader .cap{
	font-weight: bold;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	#pageheader::before{
		width: calc(5vw + 530px);
		top: 0;
		clip-path: polygon(0% 100%, 0% 0%, 87% 0%, 100% 100%);
	}
	#pageheader .details{
		left:7%;top:50%;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	#pageheader h1{
		max-width: 370px;
		padding: 40px 0;
		border-top: 5px solid  #fff;
		border-bottom: 5px solid  #fff;
		text-align: center;
	}
	#pageheader h1 img{
		max-width: 260px;
		margin: 0 auto;
	}
	#pageheader .note{
		margin-top: 30px;
		font-size: 14px;
	}
	#pageheader .note em{
		font-size: 20px;
	}
	#pageheader .cap{
		margin-top: 20px;
		font-size: 13px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	#pageheader::before{
		width: 100%;
		top: 38%;
		clip-path: polygon(0% 100%, 0% 10%, 100% 0%, 100% 100%);
	}
	#pageheader .details{
		width: 90%;
		left:50%;bottom:30px;
		-webkit-transform:translateX(-50%);
		-moz-transform:translateX(-50%);
		transform:translateX(-50%);
	}
	#pageheader h1{
		max-width: 270px;
		padding: 20px 0 15px;
		border-top: 5px solid  #fff;
		border-bottom: 5px solid  #fff;
		font-size: 20px;
	}
	#pageheader h1 img{
		display: block;
		max-width: 153px;
		margin: 0 auto;
	}
	#pageheader .note{
		margin-top: 20px;
		font-size: 13px;
	}
	#pageheader .cap{
		margin-top: 10px;
		font-size: 11px;
	}
}




/*================================
	Chapter
================================*/
main .chapter{
	
}
main .chapter h2{
	display:flex;
	display: -webkit-flex;
	-webkit-align-items: center;
	align-items: center;
	position: relative;
	padding-top: 15px;
	line-height: 1;
}
main .chapter h2::before,
main .chapter h2::after,
main .chapter h2 em::before,
main #data h2 span::before{
	content: "";
	display: block;
	width: 12px;
	border-top: 3px solid  var(--maincol);
	position: absolute;
	top: 0;
}
main .chapter h2::before{
	opacity: .6;
	left: 12px;
}
main .chapter h2::after{
	left: 24px;
}
main .chapter h2 em::before,
main #data h2 span::before{
	left: 0;
	opacity: .2;
}
main .chapter h2 em,
main .chapter h2 span{
	display: block;
}
main .chapter h2 em{
	font-family: var(--Barlow);
	letter-spacing: .1em;
}
main .chapter h2 span{
	font-weight: bold;
}
main .chapter:not(#data) h2 span{
	font-weight: bold;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main .chapter{
		width: 95%;
		max-width: 1100px;
		margin-left: auto;margin-right: auto;
	}
	main .chapter h2{
		margin-bottom: 30px;
		padding-top: 15px;
	}
	main .chapter h2 em{
		font-size: 32px;
	}
	main .chapter:not(#data) h2 span{
		margin-left: 20px;
		padding-top: 5px;
		font-size: 13px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main .chapter{
		padding: 0 5%;
	}
	main .chapter h2{
		margin-bottom: 25px;
		padding-top: 15px;
	}
	main .chapter h2 em{
		font-size: 22px;
	}
	main .chapter:not(#data) h2 span{
		margin-left: 15px;
		padding-top: 1px;
		font-size: 12px;
	}

}





/*================================
	Outline
================================*/
#outline {
	
}
#outline .infolist dt{
	background: var(--maincol);
	font-weight: bold;
	font-weight: bold;
	color: #fff;
}
#outline .infolist dd{
	background: #fff;
}
#outline .infolist .numlist {
	counter-reset: number;
}
#outline .infolist .numlist > li{
	position: relative;
	padding-left: 2.1em;
	text-indent: -1.5em;
	font-weight: bold;
}
#outline .infolist .numlist > li::before{
	counter-increment: number;
	content: counter(number);
	margin-right: 1em;
}
#outline .infolist .numlist > li::after{
	content: "○";
	position: absolute;
	font-weight: normal;
	line-height: 1;
}
#outline .infolist .numlist .caplist li{
	font-weight: normal;
}
#outline .infolist .numlist .caplist .sublist li{
	padding-left: 1.5em;
	display: -1.5em;
}
#outline .infolist .numlist .caplist .sublist li::before{
	content: "・";
}
#outline .infolist .caplist > li{
	text-indent: -1.5em;
	padding-left: 1.5em;
	line-height: 1.6;
}
#outline .infolist .caplist > li::before{
	content: "※";
	margin-right: .5em;
}
#outline .infolist + .cap{
	margin-top: 15px;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	#outline {
		margin-top: 60px;
	}
	#outline .infolist {
		display:flex;
		display: -webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	#outline .infolist dt:not(:first-of-type),
	#outline .infolist dd:not(:first-of-type){
		margin-top: 5px;
	}
	#outline .infolist dt{
		width: 10rem;
		padding: 30px;
		font-size: 18px;
		line-height: 1.7;
	}
	#outline .infolist dd{
		width: calc(100% - 10rem);
		padding: 30px 40px;
		font-size: 15px;
	}
	#outline .infolist .numlist > li::before{
		font-size: 12px;
	}
	#outline .infolist .numlist > li::after{
		left: 1.25em;top: 6px;
		font-size: 20px;
	}
	#outline .infolist .numlist > li:not(:last-of-type){
		margin-top: 5px;
	}
	#outline .infolist .numlist > li span{
		font-size: 12px;
		font-weight: normal;
	}
	#outline .infolist .numlist .caplist{
		margin: 5px 0 10px;
	}
	#outline .infolist .numlist .caplist li{
		font-size: 12px;
	}
	#outline .infolist .numlist .caplist li:not(:first-of-type){
		margin-top: 3px;
	}
	#outline .infolist .numlist .caplist .sublist{
		margin-top: 5px;
	}
	#outline .infolist dd > .caplist {
		margin-top: 20px;
	}
	#outline .infolist .caplist > li{
		font-size: 12px;
		line-height: 1.6;
	}
	#outline .infolist .caplist > li:not(:last-of-type){
		margin-bottom: 3px;
	}
	#outline .infolist + .cap{
		font-size: 12px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	#outline {
		margin-top: 50px;
	}
	#outline .infolist {
		
	}
	#outline .infolist dt{
		padding: 10px 20px;
		font-size: 15px;
	}
	#outline .infolist dt br{
		display: none;
	}
	#outline .infolist dd{
		padding: 20px 20px;
		font-size: 14px;
		line-height: 1.7;
	}
	#outline .infolist dd:not(:last-of-type){
		margin-bottom: 5px;
	}
	#outline .infolist .numlist > li::before{
		font-size: 11px;
	}
	#outline .infolist .numlist > li::after{
		left: 1.16em;top: 1px;
		font-size: 20px;
	}
	#outline .infolist .numlist > li:not(:last-of-type){
		margin-bottom: 1em;
	}
	#outline .infolist .numlist > li span{
		font-size: 12px;
		font-weight: normal;
	}
	#outline .infolist .numlist .caplist {
		margin-top: 5px;
	}
	#outline .infolist .numlist .caplist li{
		font-size: 11px;
	}
	#outline .infolist .numlist .caplist > li:not(:first-of-type){
		margin-top: 5px;
	}
	#outline .infolist .numlist .caplist .sublist {
		margin-top: 5px;
	}
	#outline .infolist .numlist .caplist .sublist li:not(:first-of-type){
		margin-top: 3px;
	}
	#outline .infolist dd > .caplist {
		margin-top: 20px;
	}
	#outline .infolist dd > .caplist li{
		font-size: 11px;
		line-height: 1.6;
	}
	#outline .infolist dd > .caplist li:not(:last-of-type){
		margin-bottom: 3px;
	}
	#outline .infolist + .cap{
		font-size: 11px;
	}
}





/*================================
	FAQ
================================*/
main #faq {
	
}
main #faq .faqlist dt,
main #faq .faqlist dd{
	position: relative;
}
main #faq .faqlist dt::before,
main #faq .faqlist dd::before{
	position: absolute;
	font-family: var(--Barlow);
	font-weight: bold;
	line-height: 1;
}
main #faq .faqlist dt{
	background: var(--maincol);
	font-weight: bold;
	color: #fff;
}
main #faq .faqlist dd{
	background: #fff;
}
main #faq .faqlist dd strong{
	color: var(--maincol);
}
main #faq .faqlist dt::before{
	content: "Q.";
	color: #7FB8BA;
}
main #faq .faqlist dd::before{
	content: "A.";
	color: #D5D5D5;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main #faq {
		margin-top: 70px;
	}
	main #faq .faqlist dt::before,
	main #faq .faqlist dd::before{
		left: 30px;
		font-size: 40px;
	}
	main #faq .faqlist dt{
		padding: 20px 30px 20px 80px;
		font-size: 17px;
	}
	main #faq .faqlist dd{
		padding: 30px 30px 30px 80px;
		font-size: 15px;
	}
	main #faq .faqlist dd:not(:last-of-type){
		margin-bottom: 15px;
	}
	main #faq .faqlist dt::before{
		top: 15px;
	}
	main #faq .faqlist dd::before{
		top: 25px;
	}
	main #faq .faqlist dd .cap{
		margin-top: 10px;
		font-size: 12px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main #faq {
		margin-top: 60px;
	}
	main #faq .faqlist dt::before,
	main #faq .faqlist dd::before{
		left: 20px;
		font-size: 30px;
	}
	main #faq .faqlist dt{
		padding: 10px 20px 10px 60px;
		font-size: 14px;
	}
	main #faq .faqlist dd{
		padding: 15px 20px 15px 60px;
		font-size: 14px;
	}
	main #faq .faqlist dd:not(:last-of-type){
		margin-bottom: 15px;
	}
	main #faq .faqlist dt::before{
		top: 10px;
	}
	main #faq .faqlist dd::before{
		top: 15px;
	}
	main #faq .faqlist dd .cap{
		margin-top: 10px;
		font-size: 11px;
	}
}





/*================================
	About Us
================================*/
main #about {
	
}
main #about .note {
	background: #fff;
}
main #about .note p:not(:last-of-type){
	margin-bottom: 1em;
}

main #about .content {
}
#about .card .card_body .ttl {
    color: var(--color2);
}
#about .card ol {
 list-style-type: none;
 border-top: 1px solid var(--border1);
 padding-top: 20px;
}
#about .card ol li {
  counter-increment: number;
  margin-bottom: .5em;
  padding-left: 2.25em;
  position: relative;
}
#about .card ol li::before {
  content: "0"counter(number)".";
  font-family: var(--font1);
  font-weight: 700;
  color: var(--color2);
  display: inline-block;
  transform: scale(1.2);
  position: absolute;
  left: 0;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main #about {
		margin-top: 70px;
	}
	main #about .note {
		padding: 40px 40px;
	}
	main #about .note p{
		font-size: 15px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main #about {
		margin-top: 60px;
	}
	main #about .note {
		padding: 30px 30px;
	}
	main #about .note p{
		font-size: 14px;
	}

}





/*================================
	Data
================================*/
main #data {
	
}
main #data .data-list {
  text-align: center;
  position: relative;
  z-index: 5;
}
main #data .data-list li {
  padding: 0 7px;
}
main #data .data-list .cont {
  padding: 0 15px 35px;
  background: var(--white);
  border: 2px solid var(--border1);
  border-radius: .75em;
  height: 100%;
  position: relative;
}
main #data .data-list .ttl {
  width: 100%;
  font-size: .875rem;
  line-height: 1.25;
  padding: .75em 1em;
  margin: 0 auto 15px;
  border-radius: 3em;
  background: var(--color4);
  color: var(--white);
  transform: translateY(-50%);
}
main #data .data-list .imgBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  font-feature-settings: "palt";
}
main #data .data-list .imgBox.row, main #data .data-list .imgBox.d-flex {
  flex-direction: row;
}
main #data .data-list .imgBox.pict-group > div {
  padding: 0;
  max-width: 11em;
  margin: 0 0 10px 0;
}
main #data .data-list .imgBox.row,
main #data .data-list .imgBox.no-gutters {
  width: 65%;
  flex-direction: column;
  align-items: flex-end;
  margin-right: auto;
  margin-left: auto;
}
main #data .data-list .imgBox.pict-group {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
main #data .data-list .imgBox .pict {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
main #data .data-list .imgBox .pict img, main #data .data-list .imgBox .pict svg {
  display: inline-block;
  vertical-align: bottom;
  line-height: 1;
}
main #data .data-list .counter {
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
}
main #data .data-list .imgBox.row .counter {
  padding: 0 5px;
}
main #data .data-list .counter span:not(:last-child) {
  margin-right: .2rem;
}
main #data .data-list .counter span {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
main #data .data-list .counter span.small,
main #data .data-list .imgBox.row .counter span:not(.num),
main #data .data-list .imgBox.d-flex .counter span:not(.num) {
  font-size: .875rem;
}
main #data .data-list .counter span.plus {
  font-size: 1.5rem;
  transform: translateY(-.1em);
}
main #data .data-list .counter span.num {
  font-family: var(--font1);
  font-size: 3.125rem;
  transform: translateY(.06em);
  color: var(--color4);
}
main #data .data-list .imgBox.row .counter span.num,
main #data .data-list .imgBox.d-flex .counter span.num {
  font-size: 2.5rem;
}
main #data .data-list .imgBox.pict-group .counter span.num {
  font-size: 2rem;
}
main #data .data-list .counter span.num small {
  font-size: 60%;
}
main #data .data-list .counter span sup {
  display: inline-block;
  font-size: 10px;
  transform: scale(0.6) translateY(-40%);
}
main #data .data-list p {
  font-size: .75rem;
  line-height: 1.75;
  letter-spacing: 0;
  margin-top: 5px;
}
main #data .data-list p.other {
  color: var(--color4);
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0;
    margin: 10px 0 0 0;
}
main #data .data-list .cont.programming .counter {
  border: var(--color4) 5px solid;
    /* color: var(--white); */
    margin: 0;
    width: 120px;
    height: 120px;
    border-radius: 110px;
    padding: 30px 0;
}
main #data .data-list .cont.programming .col-4 {
  max-width: 10em;
}
main #data .data-list .cont.programming .counter span {
}
main #data .data-list .cont.programming .counter span.small {
  font-size: 11px;
  margin: 0 0 2px 0;
}
@media (min-width: 768px) and (max-width: 991px) {
  main #data .data-list .cont {
    padding: 0 10px 25px;
  }
  main #data .data-list .ttl {
    padding: .75em 0;
    font-size: .75rem;
  }
  main #data .data-list p {
    font-size: .625rem;
  }
  main #data .data-list .counter span {
    font-size: .813rem !important;
  }
  main #data .data-list .counter span.num {
    font-size: 2rem !important;
  }
  main #data .data-list .imgBox.pict-group .counter span{
    font-size: .75rem !important;
  }
  main #data .data-list .imgBox.pict-group .counter span.num {
    font-size: 1.75rem !important;
  }
}
@media (min-width: 992px) {
  main #data .data-list .imgBox.row, main #data .data-list .imgBox.no-gutters {
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 40em;
  }
  main #data .data-list .imgBox.pict-group > div {
    max-width: 8em;
    margin: 0 0 10px 0;
  }
  main #data .data-list .imgBox.row .counter {
    padding-bottom: 5px;
  }
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main #data {
		margin-top: 70px;
	}
	main #data h2{
		margin-bottom: 50px;
		padding-top: 25px;
		font-size: 24px;
	}
	main #data .data-list li:not(:last-of-type):not(:nth-last-of-type(2)){
	  margin-bottom: 3em;
	}
	main #data + .goinfo {
		margin-top: 70px;
		padding: 40px 3%;
		background: url(../recruit_campaign/img/more_bg.jpg) center center /cover no-repeat;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main #data {
		margin-top: 60px;
	}
	main #data h2{
		margin-bottom: 50px;
		padding-top: 25px;
		font-size: 22px;
	}
	main #data .row{
		margin-left: 0;margin-right: 0;
	}
	main #data .data-list li:not(:last-of-type){
	  margin-bottom: 3em;
	}
	main #data + .goinfo {
		margin-top: 50px;
		padding: 40px 0;
		background: url(../recruit_campaign/img/more_bg_sp.jpg) center center /cover no-repeat;
	}
}




/*================================
	Related
================================*/
main #related {
	
}
main #related .relatedlist li a{
	display: block;
	position: relative;
	color: #fff;
}
main #related .relatedlist li span{
	display: block;
	width: 100%;
	position: absolute;
	left: 0;bottom: 0;
	background: var(--maincol);
	font-weight: bold;
}
main #related .relatedlist li span em{
	display: inline-block;
	margin-right: 5px;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	main #related {
		width: 95%;
		max-width: 1100px;
		margin: 70px auto 0;
	}
	main #related .relatedlist{
		display:flex;
		display: -webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	main #related .relatedlist li{
		width: 47%;
	}
	main #related .relatedlist li span{
		padding: 20px;
		font-size: 14px;
	}
	main #related .relatedlist li span em{
		font-size: 20px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	main #related {
		margin-top: 50px;
		padding: 0 5%;
	}
	main #related .relatedlist{
		
	}
	main #related .relatedlist li:not(:last-of-type){
		margin-bottom: 10px;
	}
	main #related .relatedlist li span{
		padding: 15px;
		font-size: 12px;
	}
	main #related .relatedlist li span em{
		font-size: 16px;
	}
}




/*================================
	Footer
================================*/
#lpfooter {
	background: var(--maincol);
}
#lpfooter .navlist li{
	display: inline-block;
}
#lpfooter .navlist li a{
	color: #fff;
}
#lpfooter .navlist li:not(:last-of-type)::after{
	content: "|";
	margin: 0 .5em 0 1em;
	color: #fff;
}
#lpfooter small{
	font-family: var(--Barlow);
	color: #fff;
}


/*------------------------
	PC
------------------------*/
@media screen and (min-width: 992px) {
	#lpfooter {
		display:flex;
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
		padding: 40px 3%;
	}
	#lpfooter .logo{
		width: 140px;
	}
	#lpfooter .navlist {
		margin-left: 30px;
	}
	#lpfooter .navlist li{
		font-size: 12px;
	}
	#lpfooter small{
		margin-right: 0;margin-left: auto;
		font-size: 12px;
	}
}


/*------------------------
	SP
------------------------*/
@media screen and (max-width: 991px) {
	#lpfooter {
		padding: 30px 5%;
	}
	#lpfooter .logo{
		width: 140px;
		margin: 0 auto;
	}
	#lpfooter .navlist {
		margin-top: 20px;
		text-align: center;
	}
	#lpfooter .navlist li{
		font-size: 10px;
	}
	#lpfooter small{
		display: block;
		margin-top: 10px;
		text-align: center;
		font-size: 11px;
		line-height: 1;
	}

}