@charset "UTF-8";

section.network-archive {
	padding: 80px 0;
}
.network-archive h3 {
	margin-bottom:50px;
}
.network-archive .stroke h3 {
	color: var(--color-secondary);
}
.network-archive .stroke h3 span {
	border-bottom: solid 2px var(--color-secondary);
}
.network-archive .stroke h3 span::before {
	bottom: 0;
    left: -24px;
    content: "";
    width: 48px;
    aspect-ratio: 74 / 64;
    background-image: url(../images/common/h3_brain.svg);
}
.network-archive .heart h3 span::before {
	bottom: 0;
    left: -18px;
    content: "";
    width: 48px;
    aspect-ratio: 74 / 64;
    background-image: url(../images/common/h3_heart.svg);
}
.content_wrap.stroke {
	margin-top:80px;
}
.network-swiper .swiper-slide,.stroke-swiper .swiper-slide {
  display: flex;
}
.network-swiper .card,.stroke-swiper .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  height: auto; /* JSで後から指定されるので初期はauto */
  padding: 1.5rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0, 153, 203, 0.70);
  overflow: hidden;
  box-sizing: border-box;
	margin: 1rem;
}
.network-swiper .card {
	box-shadow: 0px 0px 8px var(--color-thard);
}
.network-swiper .card-title,.stroke-swiper .card-title {
  font-size: 1.2rem;
  line-height: 1.5;               /* 行間 */
  height: calc(1.5em * 2);        /* 2行分の高さ */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 最大2行に制限 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
	border-bottom: 1px solid var(--color-secondary);
	padding-bottom:20px;
	margin-bottom:20px;
	color:var(--color-secondary);
}
.network-swiper .card-title {
	color:var(--color-thard);
	border-bottom: 1px solid var(--color-thard);
}
.network-swiper .card-date,.stroke-swiper .card-date {
	text-align:right;
}
.network-swiper .card-excerpt,.stroke-swiper .card-excerpt {
  font-size: 1rem;
  margin-top: auto; /* 最後に詰める要素の場合 */
  word-break: break-word;
}
.network-swiper .swiper-button-prev,.network-swiper .swiper-button-next,.stroke-swiper .swiper-button-prev,.stroke-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
}
.network-swiper .swiper-button-prev,.stroke-swiper .swiper-button-prev {
  left: -3rem; /* 左側に配置 */
}
.network-swiper .swiper-button-next,.stroke-swiper .swiper-button-next {
  right: -3rem; /* 右側に配置 */
}
.network-archive .submit {
	margin: 20px 0 10px;
	text-align:right;
}
.network-archive .submit a {
	width: 160px;
	color:var(--color-thard);
	display:inline-block;
	text-align: left;
    text-decoration: none;
    line-height: 40px;
    outline: none;
    background-color: #fff;
    position: relative;
    border: 1px solid var(--color-thard);
    border-radius: 25px;
    transition: color 0.5s ease;
    overflow: hidden;
}
.network-archive .stroke .submit a {
	color:var(--color-secondary);
	border: 1px solid var(--color-secondary);
}
.network-archive .submit a::before {
	position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-thard);
    border-radius: 25px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 0;
}
.network-archive .stroke .submit a::before {
	background: var(--color-secondary);
}
.network-archive .submit .text{
	position: relative;
    padding-left: 20px;
    z-index: 1;
}
.network-archive .submit .text::after {
	position: absolute;
    top: 10px;
    left: 140px;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--color-thard);
    border-right: 2px solid var(--color-thard);
    transform: rotate(45deg);
}
.network-archive .stroke .submit .text::after {
	border-top: 2px solid var(--color-secondary);
    border-right: 2px solid var(--color-secondary);
}
.network-archive .submit a:hover {
	color:#fff;
}
.network-archive .submit a:hover::before {
	transform: scaleX(1);
}
.network-archive .submit:hover .text::after {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.network-archive .submit-network {
	margin:50px 0;
	text-align:center;
}
.network-archive .submit-network a {
	display:inline-block;
	padding:1rem 3rem;
	color:var(--color-secondary);
	background:#fff;
	border-radius:50px;
	font-size:20px;
	border: solid 1px var(--color-secondary);
	transition: color 0.5s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
	box-shadow: 0 0 8px var(--color-secondary);
}
.network-archive .submit-network a::before {
	position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: -1;
	background: var(--color-secondary)
}
.network-archive .submit-network a:hover::before {
	transform: scaleX(1);
}
.network-archive .heart .submit-network a {
	color:var(--color-thard);
	border: solid 1px var(--color-thard);
	box-shadow: 0 0 8px var(--color-thard);
}
.network-archive .heart .submit-network a::before {
	background: var(--color-thard)
}
.network-archive .submit-network a:hover {
	color:#fff;
}
.pagination {
	width: 100%;
	max-width:1200px;
	margin:80px auto 50px;
	font-size: 18px;
	text-align:center;
}

a.page-numbers {
	background-color:var(--color-thard);
	border-radius:50%;
	padding:5px 13px;
	color:#fff;
	margin: 0 10px;
}
.nav-links a.prev,.nav-links a.next {
	background-color:#fff;
	color:#000;
}
@media screen and (max-width: 750px) {
	.network-archive .content_wrap {
		flex-flow:column;
	}
	.network-archive .content_wrap .network-post {
		width:100%;
	}
	.network-archive .text {
		width:100%;
	}
	.network-archive .content_wrap {
		width:96%;
		padding: 0 2%;
	}
}
@media screen and (max-width: 480px) {
	.network-archive .heart h3 span {
		padding-left:0;
	}
	.network-archive .heart h3 span::before {
		bottom:35px;
		left:calc(50% - 24px);
	}
	.network-archive .stroke h3 span {
		padding-left:0;
	}
	.network-archive .stroke h3 span::before {
		bottom:35px;
		left:calc(50% - 24px);
	}
}
@media only screen and (min-width: 1025px) {
	.tab-sp {
		display: none !important;
	}
	.swiper-button-prev::before, .swiper-button-next::before {
		-webkit-transition: var(--transition);
		        transition: var(--transition);
	}
	.swiper-button-prev:hover::before, .swiper-button-next:hover::before {
		-webkit-transform: scale(1.2);
		        transform: scale(1.2);
	}
}
@media only screen and (min-width: 750px) {
	.sp {
		display: none !important;
	}
}