@charset "UTF-8";
/* CSS Document */

/*========================================
top h2
========================================*/
h2 {
display: flex;
align-items: baseline;
}
h2.animSub.delighter {
animation:.8s ease-out both;
opacity: 0;
}
h2.animSub.delighter.started {
animation-name: rotate-anime;
}
@keyframes rotate-anime {
0%  { opacity: 0; transform:translate3d(-3%, 10%, 0) rotate(5deg);transform-origin:left top;}
50%  { opacity: 0; transform:translate3d(-1%, 5%, 0) rotate(1deg);transform-origin:left top;}
100% { opacity: 1; transform:translate3d(0, 0, 0) rotate(0deg);transform-origin:left top;}
}
h2 span {
font-size: 1vw;
line-height: 1.4em;
color: #FFF;
background-color: #1a1a1a;
display:block;
padding: 2px 1em;
margin-left: 15px;
}

/*SP*/
@media screen and (max-width: 750px) {
h2.animSub.delighter {
animation:1.2s ease-out both;
opacity: 0;
}
h2.animSub.delighter.started {
animation-name: rotate-anime;
}
@keyframes rotate-anime {
0%  { opacity: 0; transform:translate3d(-3%, 10%, 0) rotate(5deg);transform-origin:left top;}
30%  { opacity: 0.3; transform:translate3d(-1%, 5%, 0) rotate(1deg);transform-origin:left top;}
100% { opacity: 1; transform:translate3d(0, 0, 0) rotate(0deg);transform-origin:left top;}
}
h2 span {
font-size: 2.5vw;
line-height: 1.4em;
color: #FFF;
background-color: #1a1a1a;
display:block;
padding: 1px 0.5em 2px;
margin-left: 1.5%;
}
}

/*========================================
topRead
========================================*/
.topRead {
display: flex;
align-items: center;
margin-bottom: 8%;
}
.topRead p {
font-size: 2vw;
line-height: 2em;
font-weight: bold;
padding: 5em 0 5em 5%;
}
/*readbg*/
.readBg.delighter {
width: 100%;
animation-timing-function: ease;
animation-duration: 3s;
animation-fill-mode: both;
}
.readBg2.delighter {
animation-timing-function: ease;
animation-duration: 3s;
animation-fill-mode: both;
}
.readBg.delighter.started {
animation-name: readBg;
background: url("../images/top_read_bg01.png") -3000px 15% no-repeat;
background-size: 80%;
}
.readBg2.delighter.started {
animation-name: readBg2;
background: url("../images/top_read_bg02.png") -3000px 85% no-repeat;
background-size: 80%;
}
@keyframes readBg {
0% {
width: 100%;
background: url("../images/top_read_bg01.png") -3000px 15% no-repeat;
background-size: 80%;
}
30% {
width: 100%;
background: url("../images/top_read_bg01.png") center 15% no-repeat;
background-size: 80%;
}
100% {
width: 100%;
background: url("../images/top_read_bg01.png") center 15% no-repeat;
background-size: 80%;
}
}
@keyframes readBg2 {
0% {
width: 100%;
background: url("../images/top_read_bg02.png") -3000px 85% no-repeat;
background-size: 80%;
}
34% {
width: 100%;
background: url("../images/top_read_bg02.png") -3000px 85% no-repeat;
background-size: 80%;
}
64% {
width: 100%;
background: url("../images/top_read_bg02.png") right 85% no-repeat;
background-size: 80%;
}
100% {
width: 100%;
background: url("../images/top_read_bg02.png") right 85% no-repeat;
background-size: 80%;
}
}

/*SP*/
@media screen and (max-width: 750px) {
.topRead {
display: flex;
align-items: center;
margin-bottom: 8%;
}
.topRead p {
font-size: 4vw;
line-height: 2em;
font-weight: bold;
padding: 4em 6% 4em 6%;
}
.readBg.delighter.started {
animation-name: readBg;
}
.readBg2.delighter.started {
animation-name: readBg2;
}
@keyframes readBg {
0% {
width: 100%;
background: url("../images/top_read_bg01sp.png") -3000px 10% no-repeat;
background-size: 100%;
}
30% {
width: 100%;
background: url("../images/top_read_bg01sp.png") center 10% no-repeat;
background-size: 100%;
}
100% {
width: 100%;
background: url("../images/top_read_bg01sp.png") center 10% no-repeat;
background-size: 100%;
}
}
@keyframes readBg2 {
0% {
width: 100%;
background: url("../images/top_read_bg02sp.png") -3000px 90% no-repeat;
background-size: 100%;
}
34% {
width: 100%;
background: url("../images/top_read_bg02.png") -3000px 90% no-repeat;
background-size: 100%;
}
64% {
width: 100%;
background: url("../images/top_read_bg02sp.png") right 90% no-repeat;
background-size: 100%;
}
100% {
width: 100%;
background: url("../images/top_read_bg02sp.png") right 90% no-repeat;
background-size: 100%;
}
}
}

/*========================================
topBusiness
========================================*/
.topBusiness {
width: 100%;
}
.topBusiness .leaning {
margin: 16% 0 0;
padding: 18% 0 15%;
position: relative;
z-index: 0;
}
.topBusiness h2 {
margin: -25% 0 5% 2%;
}
.topBusiness h2 svg {
width: 48%;
}
.topBusiness .inner {
width: 100%;
position: relative;
}
.topBusiness ul {
width: calc(90% + 60px);
max-width: 1060px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.topBusiness li {
width: calc(100% / 3 - 40px);
margin: 0 20px 40px;
height: 200px;
background-color: #FFF;
overflow: hidden;
position: relative;
z-index: 9000;
}
.topBusiness li p {
position: absolute;
bottom: 30px;
left: 20px;
font-size: 36px;
line-height: 1em;
font-weight: bold;
font-family: 'Cabin', sans-serif;
}
.topBusiness li .jpTxt {
width: 100%;
color: #FFF;
font-size: 14px;
line-height: 1.2em;
padding: 3px 0;
text-indent: 1.5em;
position: absolute;
bottom: 0;
left: 0;
}
@media screen and (max-width: 1000px) {
.topBusiness li p {font-size: 3.5vw;}
.topBusiness li .jpTxt {font-size: 1.4vw;}
}
.topBusiness li a {
width: 100%;
height: 100%;
display: block;
color: #1a1a1a;
text-decoration: none;
}
.topBusiness li .pac {
pointer-events: none;
display:flex;
align-items: center;
justify-content: center;
white-space: nowrap;
height: 200px;
position: absolute;
top:0px;
left:0;
}
.topBusiness li .pac img {
height: 200px;
}
.topBusiness li:nth-child(1) .pac  {
animation:slider1 5s linear infinite;
width: 300px;
}
@keyframes slider1 {
0% { left:0;}
100% { left:-300px;}
}
.topBusiness li:nth-child(2) .pac  {
animation:slider2 5s linear infinite;
width: 720px;
}
@keyframes slider2 {
0% { left:0;}
100% { left:-720px;}
}
.topBusiness li:nth-child(3) .pac  {
animation:slider3 10s linear infinite;
width: 410px;
}
@keyframes slider3 {
0% { left:0;}
100% { left:-410px;}
}
.topBusiness li:nth-child(4) .pac  {
animation:slider4 10s linear infinite;
width: 1190px;
}
@keyframes slider4 {
0% { left:0;}
100% { left:-1190px;}
}
.topBusiness li:nth-child(5) .pac  {
animation:slider5 20s linear infinite;
width: 1220px;
}
@keyframes slider5 {
0% { left:0;}
100% { left:-1220px;}
}
.topBusiness li:nth-child(6) .pac  {
animation:slider6 10s linear infinite;
width: 1180px;
}
@keyframes slider6 {
0% { left:0;}
100% { left:-1180px;}
}
.topBusiness li:nth-child(7) .pac  {
animation:slider7 15s linear infinite;
width: 740px;
}
@keyframes slider7 {
0% { left:0;}
100% { left:-740px;}
}
.topBusiness li:nth-child(8) .pac  {
animation:slider8 10s linear infinite;
width: 1290px;
}
@keyframes slider8 {
0% { left:0;}
100% { left:-1290px;}
}
.topBusiness li:hover img {
filter: blur(3px);
}

.topBusiness .figure.scrollme {
width: 100%;
position: absolute;
bottom: 5%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}

/*SP*/
@media screen and (max-width: 750px) {
.topBusiness .leaning {
padding: 18% 0 20%;
}
.topBusiness .inner {
width: 88%;
margin: 0 auto;
position: relative;
}
.topBusiness ul {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.topBusiness li {
width: calc(98% / 2);
margin: 0 0 2%;
height: 150px;
background-color: #FFF;
overflow: hidden;
position: relative;
z-index: 9000;
}
.topBusiness li p {
position: absolute;
bottom: 28px;
left: 5%;
font-size: 5.5vw;
line-height: 1em;
font-weight: bold;
}
.topBusiness li .jpTxt {
font-size: 2.9vw;
line-height: 1.2em;
padding: 3px 0;
text-indent: 0.8em;
}
.topBusiness li .pac {
pointer-events: none;
display:flex;
align-items: center;
justify-content: center;
white-space: nowrap;
height: 150px;
position: absolute;
top:0px;
left:0;
}
.topBusiness li .pac img {
height: 150px;
}
.topBusiness li:nth-child(1) .pac  {
animation:slider1 5s linear infinite;
width: 225px;
}
@keyframes slider1 {
0% { left:0;}
100% { left:-225px;}
}
.topBusiness li:nth-child(2) .pac  {
animation:slider2 10s linear infinite;
width: 540px;
}
@keyframes slider2 {
0% { left:0;}
100% { left:-540px;}
}
.topBusiness li:nth-child(3) .pac  {
animation:slider3 10s linear infinite;
width: 307.5px;
}
@keyframes slider3 {
0% { left:0;}
100% { left:-307.5px;}
}
.topBusiness li:nth-child(4) .pac  {
animation:slider4 10s linear infinite;
width: 892.5px;
}
@keyframes slider4 {
0% { left:0;}
100% { left:-892.5px;}
}
.topBusiness li:nth-child(5) .pac  {
animation:slider5 20s linear infinite;
width: 915px;
}
@keyframes slider5 {
0% { left:0;}
100% { left:-915px;}
}
.topBusiness li:nth-child(6) .pac  {
animation:slider6 10s linear infinite;
width: 885px;
}
@keyframes slider6 {
0% { left:0;}
100% { left:-885px;}
}
.topBusiness li:nth-child(7) .pac  {
animation:slider7 15s linear infinite;
width: 555px;
}
@keyframes slider7 {
0% { left:0;}
100% { left:-555px;}
}
.topBusiness li:nth-child(8) .pac  {
animation:slider8 10s linear infinite;
width: 967.5px;
}
@keyframes slider8 {
0% { left:0;}
100% { left:-967.5px;}
}
.topBusiness li:hover img {
filter: none;
}
.topBusiness .figure.scrollme {
width: 100%;
position: absolute;
bottom: 5%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
}


/*========================================
topNews
========================================*/
/*
.topNews {
width: 100%;
border-bottom: #c6c6c6 1px solid;
margin-bottom: 8%;
}
.topNews .leaning {
padding: 15% 0 8%;
position: relative;
z-index: 0;
}
.topNews h2 {
margin: -20% 0 5% 2%;
}
*/
.topNews {
border-bottom: #c6c6c6 1px solid;
margin-bottom: 8%;
padding-bottom: 6%;
}
.topNews .leaning {
padding: 0;
position: relative;
z-index: 0;
}
.topNews h2 {
margin: 0 0 5% 2%;
}
.topNews h2 svg {
width: 30%;
}
.topNews .inner {
max-width: 1000px;
margin: 0 auto;
}
.topNews ul {
width: calc(90% + 60px);
max-width: 1000px;
margin: 0 auto;
padding: 20px 0;
display: flex;
justify-content: center;
}
/*stroke*/
.topNews .stroke.is-animated .border.top,
.topNews .stroke.is-animated .border.bottom {
animation: stroke-width 15s cubic-bezier(0.22, 1, 0.36, 1) 1;
}
.topNews .stroke.is-animated .border.right,
.topNews .stroke.is-animated .border.left {
animation: stroke-height 15s cubic-bezier(0.22, 1, 0.36, 1) 1;
}
.topNews li {
width: calc(100% / 3 - 41px);
clear: both;
border-left: #c6c6c6 1px solid;
margin: 0;
padding: 10px 20px 10px;
}
.topNews li:first-child {
border: none;
}
.topNews li a {
color: #1a1a1a;
text-decoration: none;
}
.topNews li p.date {
font-size: 12px;
line-height: 1.4em;
font-weight: bold;
margin-bottom: 0.5em;
}
.topNews li p.date strong {
background-color: #f00000;
color: #FFF;
font-size: 12px;
line-height: 1em;
font-weight: bold;
padding: 2px 0.5em;
}
.topNews li p.title {
font-size: 14px;
line-height: 1.4em;
height: 2.5em;
overflow: hidden;
margin-bottom: 0.5em;
}
.topNews .moreArw {
width: calc(100% - 15px);
text-align: right;
}
.topNews .moreArw span {
display: inline-block;
width: 48px;
height: 8px;
border-bottom: 1px solid #1a1a1a;
border-right: 1px solid #1a1a1a;
transform: skew(45deg);
}
.topNews li a:hover .moreArw span {
width: 98px;
}
.topNews .moreArw span,
.topNews .moreArw span::before,
.topNews .moreArw span::after { 
-webkit-transition: all .4s;
transition: all .4s;
}

/*SP*/
@media screen and (max-width: 750px) {
	/*
	.topNews {
	width: 100%;
	border-bottom: #c6c6c6 1px solid;
	margin-bottom: 12%;
	}
	.topNews .leaning {
	padding: 15% 0 8%;
	position: relative;
	z-index: 0;
	}
	*/
	.topNews {
	border-bottom: #c6c6c6 1px solid;
	margin-bottom: 10%;
	padding-bottom: 8%;
	}
	.topNews .leaning {
	padding: 0;
	position: relative;
	z-index: 0;
	}
	.topNews .inner {
	max-width: 100%;
	margin: 0 auto;
	}
	.topNews ul {
	width: 88%;
	max-width: 88%;
	margin: 0 auto;
	display: block;
  padding: 2% 5%;
	}
	.topNews li {
	width: 100%;
	clear: both;
	border-left: none;
	border-top: #c6c6c6 1px solid;
	margin: 0;
	padding: 4% 0 4%;
	}
	.topNews li:first-child {
	border: none;
	}
	.topNews li a {
	display: flex;
	align-items: flex-end;
	}
	.topNews li .newsTxt {
	width: 80%;
	display: block;
	}
	.topNews li p.date {
	font-size: 2.5vw;
	line-height: 1.4em;
	font-weight: bold;
	margin-bottom: 0.5em;
	}
  .topNews li p.date strong {
  background-color: #f00000;
  color: #FFF;
  font-size: 2.5vw;
  line-height: 1em;
  font-weight: bold;
  padding: 0.1em 0.5em;
  }
	.topNews li p.title {
	font-size: 3vw;
	line-height: 1.4em;
	height: auto;
	max-height: 2.6em;
	overflow: hidden;
	margin-bottom: 0;
	}
	.topNews .moreArw {
	width: 20%;
	text-align: right;
	}
	.topNews .moreArw span {
	display: inline-block;
	width: 80%;
	height: 8px;
	border-bottom: 1px solid #1a1a1a;
	border-right: 1px solid #1a1a1a;
	transform: skew(45deg);
	}
	.topNews li a:hover .moreArw span {
	width: 80%;
	}
}


/*========================================
topPickup
========================================*/
/*
.topPickup {
border-bottom: #c6c6c6 1px solid;
margin-bottom: 8%;
padding-bottom: 3%;
}
*/
.topPickup {
width: 100%;
}
.topPickup h2 {
margin: 0 0 5% 2%;
}
.topPickup h2 svg {
width: 74%;
}
.topPickup h2 span {
margin-left: -23.5%;
}
.topPickup ul {
width: calc(90% + 60px);
max-width: 1060px;
margin: 0 auto 2%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.topPickup li {
width: calc(100% / 3 - 60px);
margin: 0 30px 40px;
opacity: 0;
border-radius: 300px;
}
.topPickup li:nth-child(1).delighter {
animation:10s ease-out infinite;
}
.topPickup li:nth-child(2).delighter {
animation:10s ease-out .2s infinite;
}
.topPickup li:nth-child(3).delighter {
animation:10s ease-out .4s infinite;
}
.topPickup li:nth-child(4).delighter {
animation:10s ease-out .2s infinite;
}
.topPickup li:nth-child(5).delighter {
animation:10s ease-out .4s infinite;
}
.topPickup li:nth-child(6).delighter {
animation:10s ease-out .6s infinite;
}
.topPickup li.delighter.started {
animation-name: mask-anime;
}
@keyframes mask-anime {
  0%{ opacity: 0; transform:rotate(-10deg);  }
	5%{ opacity: 1; transform:rotate(0);}
	90%{ opacity: 1; transform:rotate(0);}
	95%{ opacity: 0; transform:rotate(10deg);}
	100%{ opacity: 0; transform:rotate(10deg);}
}
.topPickup li h3 {
padding: 10px;
}
.topPickup li p {
font-size: 16px;
line-height: 1.4em;
font-weight: bold;
padding-top: 0.3em;
}
.topPickup li a {
color: #1a1a1a;
text-decoration: none;
}

.topPickup li.delighter img {
animation:10s ease-out infinite;
border-radius: 300px;
}
.topPickup li:nth-child(2).delighter img {
animation:10s ease-out .2s infinite;
}
.topPickup li:nth-child(3).delighter img {
animation:10s ease-out .4s infinite;
}
.topPickup li:nth-child(4).delighter img {
animation:10s ease-out .2s infinite;
}
.topPickup li:nth-child(5).delighter img {
animation:10s ease-out .4s infinite;
}
.topPickup li:nth-child(6).delighter img {
animation:10s ease-out .6s infinite;
}
.topPickup li.delighter.started img {
animation-name: radius-anime;
}
@keyframes radius-anime {
  0%{ border-radius: 300px;}
	5%{ border-radius: 0px;}
	90%{ border-radius: 0px;}
	100%{ border-radius: 300px;}
}
/*SP*/
@media screen and (max-width: 750px) {
	.topPickup h2 span {
	margin-left: -23%;
	}
	.topPickup ul {
	width: 88%;
	max-width: 1060px;
	margin: 0 auto 2%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	}
	.topPickup li {
	width: 47%;
	margin: 0 0 6%;
	}
	.topPickup li p {
	font-size: 3.5vw;
	line-height: 1.2em;
	font-weight: bold;
	padding-top: 0.3em;
	}
	.topPickup li a {
	color: #1a1a1a;
	text-decoration: none;
	}
	.topPickup li:nth-child(2).delighter {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li:nth-child(3).delighter {
	animation:10s ease-out 0s infinite;
	}
	.topPickup li:nth-child(4).delighter {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li:nth-child(5).delighter {
	animation:10s ease-out 0s infinite;
	}
	.topPickup li:nth-child(6).delighter {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li.delighter.started {
	animation-name: mask-anime;
	}
	.topPickup li:nth-child(2).delighter img {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li:nth-child(3).delighter img {
	animation:10s ease-out 0s infinite;
	}
	.topPickup li:nth-child(4).delighter img {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li:nth-child(5).delighter img {
	animation:10s ease-out 0s infinite;
	}
	.topPickup li:nth-child(6).delighter img {
	animation:10s ease-out .2s infinite;
	}
	.topPickup li.delighter.started img {
	animation-name: radius-anime;
	}
}

/*stroke*/
.stroke {
position: relative;
}
.stroke .border {
content: "";
position: absolute;
opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
width: calc(100% - 20px);
}
.stroke .border.top {
border-width: 1px;
border-top-style: solid;
right: 0;
top: 0;
}
.stroke .border.bottom {
border-width: 1px;
border-bottom-style: solid;
left: 0;
bottom: 0;
}
.stroke .border.right,
.stroke .border.left {
height: calc(100% - 20px);
}
.stroke .border.right {
border-width: 1px;
border-right-style: solid;
right: 0;
top: 0;
}
.stroke .border.left {
border-width: 1px;
border-left-style: solid;
left: 0;
bottom: 0;
}
.stroke.is-animated .border {
opacity: 1;
}
.topPickup li:nth-child(1) .stroke.is-animated .border.top,
.topPickup li:nth-child(1) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.topPickup li:nth-child(1) .stroke.is-animated .border.right,
.topPickup li:nth-child(1) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.topPickup li:nth-child(2) .stroke.is-animated .border.top,
.topPickup li:nth-child(2) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
}
.topPickup li:nth-child(2) .stroke.is-animated .border.right,
.topPickup li:nth-child(2) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
}
.topPickup li:nth-child(3) .stroke.is-animated .border.top,
.topPickup li:nth-child(3) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .4s infinite;
}
.topPickup li:nth-child(3) .stroke.is-animated .border.right,
.topPickup li:nth-child(3) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .4s infinite;
}
.topPickup li:nth-child(4) .stroke.is-animated .border.top,
.topPickup li:nth-child(4) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
}
.topPickup li:nth-child(4) .stroke.is-animated .border.right,
.topPickup li:nth-child(4) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
}
.topPickup li:nth-child(5) .stroke.is-animated .border.top,
.topPickup li:nth-child(5) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .4s infinite;
}
.topPickup li:nth-child(5) .stroke.is-animated .border.right,
.topPickup li:nth-child(5) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .4s infinite;
}
.topPickup li:nth-child(6) .stroke.is-animated .border.top,
.topPickup li:nth-child(6) .stroke.is-animated .border.bottom {
animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .6s infinite;
}
.topPickup li:nth-child(6) .stroke.is-animated .border.right,
.topPickup li:nth-child(6) .stroke.is-animated .border.left {
animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .6s infinite;
}
@keyframes stroke-width {
	0% {
	width: 0;
	opacity: 1;
	}
	10% {
	width: 0;
	opacity: 1;
	}
	15% {
	width: calc(100% - 20px);
	opacity: 1;
	}
	100% {
	width: calc(100% - 20px);
	opacity: 1;
	}
}
@keyframes stroke-height {
	0% {
	height: 0;
	opacity: 1;
	}
	10% {
	height: 0;
	opacity: 1;
	}
	15% {
	height: calc(100% - 20px);
	opacity: 1;
	}
	100% {
	height: calc(100% - 20px);
	opacity: 1;
	}
}
/*SP*/
@media screen and (max-width: 750px) {
	.topPickup li:nth-child(1) .stroke.is-animated .border.top,
	.topPickup li:nth-child(1) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	}
	.topPickup li:nth-child(1) .stroke.is-animated .border.right,
	.topPickup li:nth-child(1) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	}
	.topPickup li:nth-child(2) .stroke.is-animated .border.top,
	.topPickup li:nth-child(2) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
	.topPickup li:nth-child(2) .stroke.is-animated .border.right,
	.topPickup li:nth-child(2) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
	.topPickup li:nth-child(3) .stroke.is-animated .border.top,
	.topPickup li:nth-child(3) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite;
	}
	.topPickup li:nth-child(3) .stroke.is-animated .border.right,
	.topPickup li:nth-child(3) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite;
	}
	.topPickup li:nth-child(4) .stroke.is-animated .border.top,
	.topPickup li:nth-child(4) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
	.topPickup li:nth-child(4) .stroke.is-animated .border.right,
	.topPickup li:nth-child(4) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
	.topPickup li:nth-child(5) .stroke.is-animated .border.top,
	.topPickup li:nth-child(5) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite;
	}
	.topPickup li:nth-child(5) .stroke.is-animated .border.right,
	.topPickup li:nth-child(5) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) 0s infinite;
	}
	.topPickup li:nth-child(6) .stroke.is-animated .border.top,
	.topPickup li:nth-child(6) .stroke.is-animated .border.bottom {
	animation: stroke-width 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
	.topPickup li:nth-child(6) .stroke.is-animated .border.right,
	.topPickup li:nth-child(6) .stroke.is-animated .border.left {
	animation: stroke-height 10s cubic-bezier(0.22, 1, 0.36, 1) .2s infinite;
	}
}

/*topPickup linkBtn*/
.topPickup .linkBtn {
width: 25%;
margin: 0 auto 6%;
font-size: 1.2vw;
line-height: 1.2em;
text-align: center;
border-width: 1px;
border-style: solid;
z-index: 1;
}
.topPickup .linkBtn button {
display: block;
background: none;
border: none;
width: 100%;
height: 100%;
padding: 0.6em 0;
}

@media screen and (min-width: 1000px) {
	.topPickup .linkBtn {
	max-width: 300px;
	font-size: 14px;
	line-height: 1.2em;
	}
}
/*SP*/
@media screen and (max-width: 750px) {
	/*linkBtn*/
	.topPickup .linkBtn {
	max-width: 50%;
	width: 50%;
	margin: 0 auto 8%;
	font-size: 14px;
	line-height: 1.2em;
	}
	.topPickup .linkBtn button {
	padding: 0.8em 0;
	}
}

/*========================================
adFeed
========================================*/
.adFeed {
width: 100%;
position: relative;
padding: 0 0 4%;
}
.adFeed h2 {
width: 98%;
display: flex;
align-items: baseline;
position: absolute;
left: 2%;
top: 10%;
fill: #FFF;
pointer-events: none;
z-index: 9900;
}
.adFeed h2 svg {
width: 75%;
}
/*feedArticles*/
.feedArticles {
width: 90%;
margin: 0 auto;
padding: 13% 0 4%;
display: flex;
}
.feedArticles li {
width: calc(100% / 4);
overflow:hidden;
}
.feedArticles li a {
text-decoration: none;
color: #1a1a1a;
}
.feedArticles .feedListImg {
height:250px;
object-fit: cover;
}
.feedArticles .feedTxtArea {
background-color:#FFF;
height: 80px;
}
.feedArticles .feedTxtArea p {
font-size: 12px;
line-height: 1.7em;
padding: 1.5em;
height: 2.2em;
overflow: hidden;
}
/*linkBtn*/
.adFeed .linkBtn {
width: 25%;
margin: 0 auto;
font-size: 1.2vw;
line-height: 1.2em;
text-align: center;
border: #FFF 1px solid;
background-size: 200% 100%;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s;
background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, .5) 50%);
z-index: 1;
}
.adFeed .linkBtn a {
display: block;
color: #FFF;
text-decoration: none;
width: 100%;
height: 100%;
padding: 0.8em 0;
}
.adFeed .linkBtn:hover {
background-position: -100% 100%;
overflow: hidden;
}
@media screen and (min-width: 1000px) {
	.adFeed .linkBtn {
	max-width: 300px;
	font-size: 14px;
	line-height: 1.2em;
	}
}
/*SP*/
@media screen and (max-width: 750px) {
	.adFeed {
	width: 100%;
	position: relative;
	padding: 0 0 8%;
	}
	.adFeed h2 {
	width: 98%;
	display: flex;
	align-items: baseline;
	position: absolute;
	left: 2%;
	top: 6%;
	fill: #FFF;
	pointer-events: none;
	z-index: 9900;
	}
	/*feedArticles*/
	.feedArticles {
	width: 88%;
	margin: 0 auto;
	padding: 18% 0 8%;
	display:  block;
	flex-wrap: wrap;
	}
	.feedArticles li {
	width: 100%;
	overflow:hidden;
	}
	.feedArticles .feedListImg {
	height:100px;
	object-fit: cover;
	}
	.feedArticles .feedTxtArea {
	background-color:#FFF;
	height:  auto;
	}
	.feedArticles .feedTxtArea p {
	font-size: 13px;
	line-height: 1.5em;
	padding: 1em 1.5em 1.2em;
	height:  auto;
	overflow: hidden;
	}
	/*linkBtn*/
	.adFeed .linkBtn {
	max-width: 50%;
	width: 50%;
	font-size: 14px;
	line-height: 1.2em;
	}
	.adFeed .linkBtn a {
	display: block;
	color: #FFF;
	text-decoration: none;
	width: 100%;
	height: 100%;
	padding: 1em 0;
	}
}