@charset "utf-8";
.fv {
    background-image: url(https://silencenet.com/system_panel/uploads/images/t-fv-bg.png);
    background-size: cover;
    background-position: center;
}
.fv__inner {
  padding: 0 clamp(2.5rem, -2.083rem + 9.55vw, 9.375rem);
      position: relative;
    padding-top: clamp(11.25rem, 9.875rem + 2.86vw, 13.313rem);
    padding-bottom: 133px;
}
.fv__container {
      display: flex;
    justify-content: space-between;
}

.news {
      position: absolute;
    bottom: 40px;
    left: clamp(1.25rem, -1.917rem + 6.6vw, 6rem);
      max-width: 600px;
    width: clamp(18.75rem, 6.25rem + 26.04vw, 37.5rem);
    padding: 0 10px;
}
.news__title {
      display: flex;
    column-gap: 10px;
    align-items: center;
}
.news-title__icon {
      width: 9px;
    height: 9px;
    background-color: #fff;
    border-radius: 50%;
    min-width: 9px;
}
.news-title__main {
      font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.news section {
      margin-top: 20px;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
.resourceItemImg,
.resourceItemText {
  display: none;
}
.resourceItemTit {
      font-size: 14px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid transparent;
  transition: all 0.5s;
  width: fit-content;
  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.resourceItemTit:hover {
  border-bottom: 1px solid #fff;
}


/* 初期CSS */
.fv-container {
	    overflow: hidden;
    display: flex;
  padding-top: clamp(2.5rem, 0.167rem + 4.86vw, 6rem);
    width: 48%;
}

.visuallyHidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.text {
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-family: 'Roboto Mono', monospace;
	font-size: 5vw;
	font-weight: 700;
	text-transform: uppercase;
}
.text.is-active {
	--skewX: 0deg;
	--x: 0;
}
.text1,
.text2,
.text3 {
	    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    font-size: clamp(2rem, 1rem + 2.08vw, 3.5rem);
    font-family: "BIZ UDPGothic", sans-serif;
    letter-spacing: 0.1em;
  line-height: 1.5;
  white-space: nowrap;
}
.text2,
.text3 {
	position: absolute;
}
.text1 {
	mask-image: linear-gradient(
    to bottom, 
    #000 33.3%, 
    transparent 33.3%
  );
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}
.text2 {
	mask-image: linear-gradient(
		to bottom,
		transparent 33.3%,
		#000 33.3%,
		#000 66.6%,
		transparent 66.6%
	);
	transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}
.text3 {
	mask-image: linear-gradient(
    to bottom, 
    transparent 66.6%, 
    #000 66.6%
  );
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

.slide {
  display: flex;
  width: 52%;
  height: clamp(18.75rem, 9rem + 20.31vw, 33.375rem);
}

.slide-wrap {
  position: relative;
  width: 33.333%;
  height: clamp(18.75rem, 9rem + 20.31vw, 33.375rem);
  overflow: hidden;
}
.slide-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4); /* ← 濃さ調整 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 2;
}

/* マスクON */
.slide-wrap.is-mask::after {
  opacity: 1;
}

.slide-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translateY(-100%);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide-wrap img:first-child {
  transform: translateY(0);
}

/* 表示中 */
.is-show {
  transform: translateY(0);
  z-index: 2;
}

/* 出ていく */
.is-out {
  transform: translateY(100%);
  z-index: 1;
}


.lineup {
  padding-top: clamp(5rem, 2.375rem + 5.47vw, 8.938rem);
}
.lineup__inner {
  padding: 0 clamp(1.25rem, -17.893rem + 29.91vw, 18rem);
}
.t-title {
      text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.t-title__sub {
      font-size: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
    font-weight: 500;
    font-family: "Roboto", sans-serif;
}
.t-title__main {
      font-size: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    font-weight: 400;
}
.t-title__line {
      margin-top: clamp(0.625rem, 0.292rem + 0.69vw, 1.125rem);
    width: 80px;
    height: 3px;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
}
.lineup__wrap {
  margin-top: clamp(2rem, 0.333rem + 3.47vw, 4.5rem);
      display: flex;
    flex-direction: column;
    row-gap: clamp(2.5rem, -0.357rem + 4.46vw, 5rem);
}
.lineup__title {
      background-color: #0041BC;
    border-radius: 24px;
    padding: 8px 10px;
    display: flex;
    column-gap: 10px;
    align-items: center;
}
.lineup-title__icon {
      width: clamp(1.375rem, 1.042rem + 0.69vw, 1.875rem);
    height: clamp(1.375rem, 1.042rem + 0.69vw, 1.875rem);
    border-radius: 50%;
    background-color: #fff;
}
.lineup-title__main {
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 700;
    color: #fff;
}
.lineup__items {
      margin-top: clamp(1.25rem, 0.917rem + 0.69vw, 1.75rem);
    display: flex;
    flex-direction: column;
    row-gap: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
}
.lineup__item {
        display: flex;
    padding: 10px 20px;
    border: 1px solid #000;
    column-gap: clamp(2rem, 1.429rem + 0.89vw, 2.5rem);
    align-items: center;
}
.lineup-item__left {
       display: flex;
    align-items: center;
    column-gap: clamp(1rem, -0.143rem + 1.79vw, 2rem);
    width: 28%;
    justify-content: space-between;
}
.lineup-item__title {
      display: flex;
    align-items: center;
    column-gap: 10px;
}
.lineup-item-title__icon {
      width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    min-width: 10px;
}
.lineup-item-title__text {
   font-size: clamp(0.875rem, 0.446rem + 0.67vw, 1.25rem);
    font-weight: 400;
    white-space: nowrap;
}
.lineup-item__img {
    width: clamp(3.75rem, -0.536rem + 6.7vw, 7.5rem);
    object-fit: contain;
}
.lineup-item__right {
      display: flex;
    column-gap: clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem);
    width: 72%;
}
.lineup-item__btn {
    padding: clamp(0.5rem, -0.071rem + 0.89vw, 1rem);
    height: clamp(5.25rem, 3.036rem + 3.46vw, 7.188rem);
    outline: 2px solid #000;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    row-gap: 16px;
  min-width: 130px;
  transition: all .3s;
}
.lineup-item-btn__text {
  font-weight: 700;
  font-size: clamp(0.813rem, 0.598rem + 0.33vw, 1rem);
  transition: all .3s;
}
.lineup-item-btn__box {
      width: 29px;
    position: relative;
  height: 100%;
}
.lineup-item-btn__box img {
      position: absolute;
    width: 100%;
    left: 0;
  bottom: 0;
}
.lineup-item-btn__box img:last-of-type {
  opacity: 0;
  transition: opacity .5s;
}
/* hoverすると2枚目の画像が透明じゃなくなる */
.lineup-item__btn:hover .lineup-item-btn__box img {
  opacity: 1;
}
.lineup-item__btn:hover {
  outline: 2px solid #0041BC;
  background-color: #ededed;
}
.lineup-item__btn:hover .lineup-item-btn__text {
  color: #0041BC;
}
.lineup-item__btn--2:hover .lineup-item-btn__box img {
  opacity: 1;
}
.lineup-item__btn--2:hover {
  outline: 2px solid #0091BC;
  background-color: #ededed;
}
.lineup-item__btn--2:hover .lineup-item-btn__text {
  color: #0091BC;
}
.lineup__title--2 {
  background-color: #0091BC;
}

.products {
  padding-top: 120px;
}
.products__inner {
  padding: 0 clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
}
.products__container {
      display: flex;
    align-items: center;
    background-image: url(https://silencenet.com/system_panel/uploads/images/cta-bg.png);
    border-radius: 17px;
    background-size: cover;
    background-position: right;
    column-gap: clamp(2.5rem, -0.833rem + 6.94vw, 7.5rem);
    justify-content: space-between;
    padding: clamp(2.625rem, 1.708rem + 1.91vw, 4rem) clamp(2.5rem, -0.5rem + 6.25vw, 7rem) clamp(3rem, 1.667rem + 2.78vw, 5rem);
}
.t-title--white {
      margin: unset;
    width: 20%;
}
.t-title__sub--white,
.t-title__main--white {
  color: #fff;
}
.t-title__line--white {
  background-color: #fff;
}
.products__wrap {
      width: 80%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, -0.25rem + 3.13vw, 3.5rem);
}
.products__btn {
      padding: clamp(1.5rem, 1rem + 1.04vw, 2.25rem);
    background-color: #fff;
    width: 100%;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.products-btn__sub {
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 600;
    color: #0041BC;
}
.products-btn__main {
      font-size: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    font-weight: 600;
    color: #0041BC;
}
.products-btn__icon {
      margin-top: clamp(0.813rem, 0.521rem + 0.61vw, 1.25rem);
    width: clamp(1.563rem, 0.604rem + 2vw, 3rem);
    object-fit: contain;
}

.resource {
      padding-top: clamp(5rem, 3.333rem + 3.47vw, 7.5rem);
    padding-bottom: clamp(5rem, 1.667rem + 6.94vw, 10rem);
      overflow: hidden;
    position: relative;
}
.resource__bg {
      position: absolute;
    z-index: 10;
      left: 0;
    top: 0;
    max-width: unset;
    width: clamp(50rem, -22.458rem + 150.95vw, 158.688rem);
  height: 100%;
    object-fit: cover;
}
.resource__inner {
  padding: 0 clamp(1.25rem, -12rem + 27.6vw, 21.125rem);
      position: relative;
    z-index: 20;
}
.resource__wrap {
      margin-top: clamp(2.5rem, 1.5rem + 2.08vw, 4rem);
    display: flex;
    flex-direction: column;
    row-gap: 80px;
}
.resource__header {
      clip-path: polygon(0 0, 82% 0, 100% 100%, 0% 100%);
    background-color: #0078A8;
    width: fit-content;
    font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
    font-weight: 500;
    color: #fff;
    padding: clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem) clamp(2.313rem, 0.771rem + 3.21vw, 4.625rem) clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem) clamp(1rem, 0.333rem + 1.39vw, 2rem);
}
.resource__items {
      padding-top: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
    border-top: 2px solid #0078A8;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, -1.25rem + 5.21vw, 5rem);
  row-gap: clamp(1.5rem, 0.833rem + 1.39vw, 2.5rem);
}
.resource__items a {
  padding: .5rem;
}
.resource__item {
        position: relative;
    display: flex;
    padding: 16px clamp(1.25rem, -3.417rem + 9.72vw, 8.25rem) 32px clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
    align-items: center;
    border: 2px solid #0078A8;
    justify-content: space-between;
  background-color: #fff;
}
.resource-item__title {
      font-size: clamp(1.125rem, 1.042rem + 0.17vw, 1.25rem);
    font-weight: 500;
    white-space: nowrap;
}
.resource-item__img {
  width: clamp(5.938rem, 4.896rem + 2.17vw, 7.5rem);
      height: clamp(5rem, 4.167rem + 1.74vw, 6.25rem);
    object-fit: contain;
}
.resource-item__btn {
      position: absolute;
    bottom: 0;
    right: 0;
    background-color: #0078A8;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    padding: 5px 25px 5px 32px;
    color: #Fff;
    font-weight: 500;
}
.bg-blue {
  background-color: #0041A8;
}
.bg-blue--2 {
  background-color: #0A84FF;
}
.resource__items--2 {
    border-top: 2px solid #0041A8;
}
.resource__items--3 {
    border-top: 2px solid #0A84FF;
}

.blog {
  padding-top: 80px;
}
.blog__inner {
  padding: 0 clamp(2.5rem, -15.833rem + 38.19vw, 30rem);
}
.blog__block {
  padding-top: clamp(2.5rem, 1.75rem + 1.56vw, 3.625rem);
}
.blog__block > section {
        display: flex;
    flex-direction: column;
    row-gap: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
}
.blog__block > section > article {
  transition: all 0.5s;
      padding-bottom: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    border-bottom: 1px solid #CECECE;
}
.blogItemImg img {
  display: none;
}
.blogItemText {
    display: flex;
    column-gap: 16px;
    align-items: center;
}
.blogItemTime {
       font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 500;
    color: #BCBCBC;
}
.blogItemCate {
        padding: 2px 8px;
    border: 1px solid #0041BC;
    color: #0041BC;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
    border-radius: 5px;
    font-weight: 500;
}
.blogItemTit {
        font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
    font-weight: 700;
    margin-top: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    word-break: normal;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.blog__block > section > article:hover {
  opacity: 0.5;
}

.links {
      margin-top: 120px;
    padding-top: clamp(2.813rem, 2.021rem + 1.65vw, 4rem);
    padding-bottom: clamp(2.5rem, 0.833rem + 3.47vw, 5rem);
    border-top: 1px solid #D6D6D6;
}
.links__inner {
  padding: 0 20px;
}
.links__container {
      display: flex;
    flex-direction: column;
    align-items: center;
}
.links__img {
      width: clamp(20.688rem, 15.313rem + 11.2vw, 28.75rem);
    object-fit: contain;
}
.links__title {
      margin-top: 24px;
    font-size: 16px;
    font-weight: 400;
}
.links__wrap {
      margin-top: 30px;
    display: flex;
    align-items: center;
    column-gap: 16px;
}
.links__btn {
      padding: 8px 16px;
    font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 500;
    border: 1px solid #0041BC;
    border-radius: 5px;
    color: #0041BC;
}

@media (max-width: 1023px) {
  .lineup__inner {
    padding: 0 40px;
  }
  .lineup__wrap {
        max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .lineup__item {
        flex-direction: column;
    align-items: center;
    row-gap: 16px;
    padding: 24px;
  }
  .lineup-item__left {
        flex-direction: column;
    row-gap: 12px;
    width: 100%;
  }
  .lineup-item-title__text {
    font-size: 16px;
  }
  .lineup-item__img {
    width: 150px;
  }
  .lineup-item__right {
    flex-direction: column;
    row-gap: 24px;
    width: 263px;
  }
  .lineup-item__btn {
        flex-direction: row;
    justify-content: space-between;
    width: 263px;
  }
  .lineup-item-btn__text {
    font-size: 14px;
  }
  .lineup-item-btn__box {
    height: 29px;
  }
}

@media (max-width: 767px) {
  .fv {
        padding-top: 100px;
    padding-bottom: 32px;
    background-image: url(https://silencenet.com/system_panel/uploads/images/t-fv-bg_sp.png);
  }
  .fv__inner {
    padding: 0;
  }
  .fv__container {
        flex-direction: column;
    row-gap: 68px;
  }
  .fv-container {
        width: 100%;
    padding: 0 20px;
  }
  .text1, .text2, .text3 {
    font-size: clamp(2rem, 1.483rem + 2.12vw, 2.5rem);
  }
  .slide {
        width: 100%;
    height: clamp(13.875rem, 8.832rem + 20.69vw, 18.75rem);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .slide-wrap {
    height: clamp(13.875rem, 8.832rem + 20.69vw, 18.75rem);
  }
  
  .news {
        position: unset;
    margin-top: 48px;
    max-width: unset;
    width: 100%;
    padding-left: 20px;
  }
  
  .products__inner {
    padding: 0;
  }
  .products__container {
        flex-direction: column;
    row-gap: 32px;
    background-image: url(https://silencenet.com/system_panel/uploads/images/cta-bg--sp.png);
    background-position: center;
    border-radius: 0;
  }
  .t-title--white {
    width: 100%;
  }
  .products__wrap {
        grid-template-columns: repeat(1, 1fr);
    row-gap: 40px;
    width: 100%;
    max-width: 312px;
  }
  
  .resource__bg {
        height: 30%;
    width: 1266px;
    left: 50%;
    transform: translateX(-68%);
  }
  .resource__wrap {
        max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .resource__items {
        grid-template-columns: repeat(1, 1fr);
    padding-left: 20px;
    padding-right: 20px;
  }
  .resource__item {
        flex-direction: column;
    row-gap: 6px;
    padding: 20px 48px;
  }
  .resource-item__title {
    text-align: center;
  }
  
  .links__wrap {
        flex-direction: column;
    row-gap: 16px;
  }
}

@media (max-width: 389px) {
  .lineup__inner {
    padding: 0 20px;
  }
  .products__container {
        padding-left: 20px;
    padding-right: 20px;
  }
  .resource__items {
        padding-left: 0;
    padding-right: 0;
  }
  .resource__item {
    padding: 20px;
  }
  .resource-item__title {
        white-space: normal;
    font-size: 16px;
  }
  .resourceItemTit {
    font-size: 14px;
  }
  .links__title {
    font-size: clamp(0.875rem, 0.295rem + 2.9vw, 1rem);
  }
}