@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');



body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 0;
  background: hsl(0, 0%, 100%);
}


#cover {
  width: 100%; height: calc(1000 / 750 * 100vw);
  position: relative;
  background: url(../image/index/cover_01_sp.webp) center / cover no-repeat;
}

#cover > a {
  display: flex;
  align-items: center;
  width: fit-content; height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: auto calc(25 / 750 * 100vw) calc(40 / 750 * 100vw) auto;
  padding: 0 calc(49 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 20%);
}
#cover > a::before {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;/* -- NotoSansJP は フォント上部 10% に余白があるので */
  background: linear-gradient(90deg, hsl(220, 52%, 46%), hsl(221, 90%, 33%));
  border-radius: 50%;
  opacity: 0;
}
#cover > a::after {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  outline: max(1px, calc(1 / 750 * 100vw)) solid hsla(0, 0%, 0%, 1);
  outline-offset: min(-1px, calc(-1 / 750 * 100vw));
  background: url('../image/common/header_03.svg') center / calc(13 / 750 * 100vw) no-repeat;
  border-radius: 50%;
  filter: filter: brightness(0) saturate(100%) brightness(94%) contrast(81%);
}


#importantannouncement {
  width: 100%;
  padding: calc(10 / 750 * 100vw) 0 0;
  background: hsl(210, 24%, 93%);
}

#importantannouncement > p {
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(40 / 750 * 100vw);
  color: hsl(0, 0%, 0%);
}


#product {
  width: 100%;
  padding: calc(49 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
  background: hsl(210, 24%, 93%);
}

#product > h2,
#specialsite > h2,
#brand > h2,
#support > h2,
#announcement > h2,
#pressrelease > h2,
#pickup > h2 {
  margin: 0 auto;
  font-weight: 500;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(175em / 1000);
  text-align: center;
  color: hsl(222, 100%, 31%);
}
#product > h2 > a,
#specialsite > h2 > a,
#brand > h2 > a,
#support > h2 > a,
#announcement > h2 > a,
#pressrelease > h2 > a,
#pickup > h2 > a {
  text-decoration: none;
  color: hsl(222, 100%, 31%);
}
#specialsite > h2,
#pressrelease > h2,
#pickup > h2 {
  letter-spacing: calc(85em / 1000);
}
#support > h2,
#brand > h2{
  letter-spacing: calc(125em / 1000);
}

#product > menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 / 750 * 100vw);
  width: calc(700 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto 0; padding: 0;
}
#product > menu > li {
  width: calc(345 / 750 * 100vw); height: calc(207 / 750 * 100vw);
}
#product > menu > li > a {
  display: grid;
  grid-template: 1fr auto / auto;
  width: 100%; height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(20 / 750 * 100vw) 0 calc(14 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 100%);
}
#product > menu > li > a > picture {
  grid-row: 1 / 2; grid-column: 1 / 2;
  justify-self: center;
  display: block;
  position: relative;
  width: calc(178 / 750 * 100vw); height: auto;
}
#product > menu > li > a > picture > img {
  width: 100%; height: auto;
}
#product > menu > li > a > p {
  grid-row: 2 / 3; grid-column: 1 / 2;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(305 / 750 * 100vw); min-height: calc(60 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  font-weight: 500;
  font-size: calc(26 / 750 * 100vw); line-height: calc(30 / 750 * 100vw);
  letter-spacing: calc(75em / 1000);
  text-align: center;
}
#product > menu > li > a > p::after {
  content: '';
  display: block;
  width: calc(11 / 750 * 100vw); height: calc(13 / 750 * 100vw);
  position: absolute;
  inset: calc(50% - (13 / 2 / 750 * 100vw) + 0.1em) 0 auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}
#product > menu > li:last-of-type {/* -- 一覧を見る */
  display: flex;
  justify-content: center;
  align-items: center;
}
#product > menu > li:last-of-type > a {
  display: block;
  width: fit-content; height: calc(37 / 750 * 100vw);
  position: relative;
  padding: 0 calc(50 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(37 / 750 * 100vw);
  background: transparent;
}
#product > menu > li:last-of-type > a::before {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  outline: max(1px, calc(1 / 750 * 100vw)) solid hsl(0, 0%, 0%);
  outline-offset: min(-1px, calc(-1 / 750 * 100vw));
  border-radius: 50%;
  filter: brightness(0) saturate(100%);
}
#product > menu > li:last-of-type > a::after {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  background: url('../image/common/header_03.svg') center / calc(13 / 750 * 100vw) no-repeat;
  border-radius: 50%;
  filter: brightness(0) saturate(100%);
}


#specialsite {
  width: 100%;
  padding: calc(60 / 750 * 100vw) 0;
}

#specialsite .splide {
  margin: calc(61 / 750 * 100vw) 0 0;
}
#specialsite .splide .splide__slide > a {
  display: block;
  width: 100%;
  position: relative;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
#specialsite .splide .splide__slide > a > figure {
  margin: 0;
}
#specialsite .splide .splide__slide > a > figure > img {
  width: calc(640 / 750 * 100vw); height: calc(400 / 750 * 100vw);
  object-fit: cover;
}
#specialsite .splide .splide__slide > a > figure > figcaption {
  position: relative;
  margin: calc(13 / 750 * 100vw) 0 0; padding: 0 calc(55 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(32 / 750 * 100vw);
}
#specialsite .splide .splide__slide > a > figure > figcaption::after {
  content: '';
  display: block;
  width: calc(12 / 750 * 100vw); height: calc(14 / 750 * 100vw);
  position: absolute;
  inset: calc((32 - 14) / 2 / 750 * 100vw + 0.1em) calc(22 / 750 * 100vw) auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}
#specialsite .splide .splide__pagination {
  display: flex;
  gap: 0 calc(8 / 750 * 100vw);
  width: calc(700 / 750 * 100vw);
  margin: calc(27 / 750 * 100vw) auto 0; padding: 0;
}
#specialsite .splide .splide__pagination > li {
  flex: 1;
  display: block;
  line-height: 0;
}
#specialsite .splide .splide__pagination > li > button {
  display: block;
  width: 100%; height: calc(4 / 750 * 100vw);
  margin: 0; padding: 0;
  appearance: none;
  background: hsl(0, 0%, 63%);
  border: none;
  transition: background 0.4s;
}
#specialsite .splide .splide__pagination > li > button.is-active {
  background: hsl(222, 100%, 31%);
}

#specialsite > a,
#brand > a,
#announcement > a:nth-of-type(1),/* -- 一覧を見る */
#pressrelease > a:nth-of-type(2),/* -- 一覧を見る */
#pickup > a {
  display: block;
  width: fit-content; height: calc(37 / 750 * 100vw);
  position: relative;
  margin: calc(40 / 750 * 100vw) calc(57 / 750 * 100vw) 0 auto; padding: 0 calc(50 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(37 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
#specialsite > a::before,
#brand > a::before,
#announcement > a:nth-of-type(1)::before,
#pressrelease > a:nth-of-type(2)::before,
#pickup > a::before {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  outline: max(1px, calc(1 / 750 * 100vw)) solid hsl(0, 0%, 0%);
  outline-offset: min(-1px, calc(-1 / 750 * 100vw));
  border-radius: 50%;
  filter: brightness(0) saturate(100%);
}
#specialsite > a::after,
#brand > a::after,
#announcement > a:nth-of-type(1)::after,
#pressrelease > a:nth-of-type(2)::after,
#pickup > a::after {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  background: url('../image/common/header_03.svg') center / calc(13 / 750 * 100vw) no-repeat;
  filter: brightness(0) saturate(100%);
}


#brand {
  width: 100%;
  padding: calc(59 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
  background: hsl(220, 23%, 97%);
}

#brand > menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 / 750 * 100vw);
  width: calc(640 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto 0; padding: 0;
}
#brand > menu > li {
  width: calc(315 / 750 * 100vw);
}
#brand > menu > li > a {
  display: block;
  width: 100%; height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(6 / 750 * 100vw) 0 calc(25 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 100%);
  border-radius: calc(5 / 750 * 100vw);
}
#brand > menu > li > a > figure {
  width: calc(303 / 750 * 100vw);
  margin: 0 auto;
}
#brand > menu > li > a > figure > img {
  width: calc(303 / 750 * 100vw); height: calc(189 / 750 * 100vw);
  object-fit: cover;
}
#brand > menu > li > a > figure > figcaption {
  position: relative;
  min-height: calc(32 * 3 / 750 * 100vw);
  margin: calc(13 / 750 * 100vw) 0 0; padding: 0 calc(20 / 750 * 100vw) 0 calc(10 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(32 / 750 * 100vw);
}
#brand > menu > li > a > figure > figcaption::after {
  content: '';
  display: block;
  width: calc(12 / 750 * 100vw); height: calc(14 / 750 * 100vw);
  position: absolute;
  inset: calc((32 - 14) / 2 / 750 * 100vw + 0.1em) calc(10 / 750 * 100vw) auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}


#support {
  width: 100%;
  padding: calc(59 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
}

#support > menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 / 750 * 100vw);
  width: calc(640 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto 0; padding: 0;
}
#support > menu > li {
  width: calc(315 / 750 * 100vw);
}
#support > menu > li > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(14 / 750 * 100vw) 0 calc(42 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(210, 24%, 93%);
  border-radius: calc(5 / 750 * 100vw);
}
#support > menu > li > a > img {
  display: block;
  width: calc(120 / 750 * 100vw); height: auto;
  margin: 0 auto;
  filter: brightness(0) saturate(100%) invert(28%) sepia(1%) saturate(0%) hue-rotate(286deg) brightness(99%) contrast(82%);
}
#support > menu > li > a > p {
  position: relative;
  margin: calc(6 / 750 * 100vw) auto 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(75em / 1000);
  text-align: center;
}


#companyinformation {
  width: 100%; height: calc(300 / 750 * 100vw);
  box-sizing: border-box;
  padding: calc(99 / 750 * 100vw) 0 0;
  background: url('../image/index/companyinformation_01_sp.webp') center / cover no-repeat;
}

#companyinformation > h2 {
  width: fit-content;
  margin: 0 auto;
  font-weight: 500;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(175em / 1000);
  text-align: center;
  color: hsl(222, 100%, 31%);
}

#companyinformation > a {
  display: block;
  width: fit-content; height: calc(37 / 750 * 100vw);
  position: relative;
  margin: calc(18 / 750 * 100vw) auto 0; padding: 0 calc(53 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(37 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
#companyinformation > a::before {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  outline: max(1px, calc(1 / 750 * 100vw)) solid hsl(0, 0%, 0%);
  outline-offset: min(-1px, calc(-1 / 750 * 100vw));
  border-radius: 50%;
  filter: brightness(0) saturate(100%);
}
#companyinformation > a::after {
  content: '';
  display: block;
  width: calc(37 / 750 * 100vw); height: calc(37 / 750 * 100vw);
  position: absolute;
  inset: 0.1em 0 auto auto;
  background: url('../image/common/header_03.svg') center / calc(13 / 750 * 100vw) no-repeat;
  filter: brightness(0) saturate(100%);
}


#announcement {
  width: 100%;
  padding: calc(61 / 750 * 100vw) 0 calc(59 / 750 * 100vw);
  background: hsl(220, 23%, 97%);
}

#announcement {
  width: 100%;
  padding: calc(59 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
}

#announcement > dl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: calc(700 / 750 * 100vw);
  margin: calc(26 / 750 * 100vw) auto 0;
}
#announcement > dl > dt {
  width: 100%;
  box-sizing: border-box;
  padding: calc(27 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(219, 78%, 28%);
}
#announcement > dl > dd {
  width: 100%;
  margin: calc(7 / 750 * 100vw) 0 0; padding: 0 0 calc(24 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(40 / 750 * 100vw);
  border-bottom: max(1px, calc(1 / 750 * 100vw)) solid hsl(0, 0%, 75%);
}
#announcement > dl > dd > a {
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}

#announcement > a:nth-of-type(2) {/* -- 「キャップレスＬＳ」の不具合について */
  display: block;
  width: fit-content;
  position: relative;
  margin: calc(20 / 750 * 100vw) calc(57 / 750 * 100vw) 0 auto; padding: 0 0 0 calc(16 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
#announcement > a:nth-of-type(2)::after {
  content: '';
  display: block;
  width: calc(14 / 750 * 100vw); height: calc(16 / 750 * 100vw);
  position: absolute;
  inset: calc((24 - 16) / 2 / 750 * 100vw + 0.1em) auto auto 0;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}


#pressrelease {
  width: 100%;
  padding: calc(61 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
}

#pressrelease > a:nth-of-type(1) {/* -- 玩具プレスリリースはこちら */
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(298 / 750 * 100vw); height: calc(45 / 750 * 100vw);
  margin: calc(39 / 750 * 100vw) calc(55 / 750 * 100vw) 0 auto;
  font-weight: 400;
  font-size: calc(18 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  outline: max(2px, calc(2 / 750 * 100vw)) solid hsl(0, 1%, 48%);
  outline-offset: min(-2px, calc(-2 / 750 * 100vw));
  border-radius: calc(6 / 750 * 100vw);
}

#pressrelease > dl {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: calc(700 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) auto 0;
}
#pressrelease > dl > dt {
  width: 100%;
  margin: 0 0 0 calc(28 / 750 * 100vw); padding: calc(27 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(219, 78%, 28%);
}
#pressrelease > dl > dd {
  width: 100%;
  display: grid;
  grid-template: 1fr auto / 1fr auto;
  gap: calc(45 / 750 * 100vw) calc(36 / 750 * 100vw);
  margin: calc(6 / 750 * 100vw) 0 0; padding: 0 0 calc(30 / 750 * 100vw);
  border-bottom: max(1px, calc(1 / 750 * 100vw)) solid hsl(0, 0%, 75%);
}
#pressrelease > dl > dd::before {/* -- カテゴリ */
  content: attr(data-category);
  grid-row: 2 / 3; grid-column: 1 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(168 / 750 * 100vw); height: calc(34 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 0 0 calc(28 / 750 * 100vw); padding: 0 0 0.1em;
  font-weight: 400;
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  background: hsl(219, 48%, 68%);
  border-radius: calc(5 / 750 * 100vw);
}
#pressrelease > dl > dd[data-category="プレスリリース"]::before {
  background: hsl(219, 66%, 39%);
}
#pressrelease > dl > dd > a:nth-of-type(1) {/* -- タイトル */
  grid-row: 1 / 2; grid-column: 1 / 2;
  margin: 0 0 0 calc(28 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(40 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
#pressrelease > dl > dd > a:nth-of-type(2) {/* -- 画像 */
  grid-row: 1 / 3; grid-column: 2 / 3;
  justify-self: end;
  align-self: center;
  width: calc(197 / 750 * 100vw); height: calc(139 / 750 * 100vw);
  margin: 0 calc(3 / 750 * 100vw) 0 0;
}
#pressrelease > dl > dd > a:nth-of-type(2) > img {
  width: 100%; height: 100%;
  object-fit: cover;
}


#pickup {
  width: 100%;
  padding: calc(60 / 750 * 100vw) 0;
  background: url('../image/index/pickup_01_sp.webp') center top / cover no-repeat;
}

#pickup > menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 / 750 * 100vw);
  width: calc(640 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto 0; padding: 0;
}
#pickup > menu > li {
  width: calc(315 / 750 * 100vw);
}
#pickup > menu > li > a {
  display: block;
  width: 100%; height:100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(6 / 750 * 100vw) 0 calc(18 / 750 * 100vw);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(0, 0%, 100%);
  border-radius: calc(5 / 750 * 100vw);
}
#pickup > menu > li > a > figure {
  width: calc(303 / 750 * 100vw);
  margin: 0 auto;
}
#pickup > menu > li > a > figure > img {
  width: calc(303 / 750 * 100vw); height: calc(189 / 750 * 100vw);
  object-fit: cover;
}
#pickup > menu > li > a > figure > figcaption {
  position: relative;
  margin: calc(13 / 750 * 100vw) 0 0; padding: 0 calc(20 / 750 * 100vw) 0 calc(10 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: calc(32 / 750 * 100vw);
}
#pickup > menu > li > a > figure > figcaption::after {
  content: '';
  display: block;
  width: calc(12 / 750 * 100vw); height: calc(14 / 750 * 100vw);
  position: absolute;
  inset: calc((32 - 14) / 2 / 750 * 100vw + 0.1em) calc(10 / 750 * 100vw) auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}
#pickup > menu > li > a > p {
  width: calc(283 / 750 * 100vw);
  margin: calc(8 / 750 * 100vw) auto 0;
  font-weight: 400;
  font-size: calc(20 / 750 * 100vw); line-height: calc(32 / 750 * 100vw);
}


#introduce {
  width: 100%;
  padding: calc(61 / 750 * 100vw) 0 calc(59 / 750 * 100vw);
  background: hsl(220, 23%, 97%);
}

#introduce > menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(30 / 750 * 100vw);
  width: calc(640 / 750 * 100vw);
  margin: 0 auto; padding: 0;
}
#introduce > menu > li {
  width: 100%;
}
#introduce > menu > li > a {
  display: grid;
  grid-template: auto auto / auto 1fr;
  gap: calc(12 / 750 * 100vw) calc(31 / 750 * 100vw);
  width: 100%;
  position: relative;
  text-decoration: none;
}
#introduce > menu > li > a > img {
  grid-row: 1 / 3; grid-column: 1 / 2;
  width: calc(288 / 750 * 100vw); height: auto;
}
#introduce > menu > li > a > h6 {
  grid-row: 1 / 2; grid-column: 2 / 3;
  align-self: end;
  position: relative;
  margin: 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 0%);
}
#introduce > menu > li > a > h6::after {
  content: '';
  display: block;
  width: calc(12 / 750 * 100vw); height: calc(14 / 750 * 100vw);
  position: absolute;
  inset: calc((24 - 14) / 2 / 750 * 100vw + 0.1em) 0 auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
}
#introduce > menu > li > a > p {
  grid-row: 2 / 3; grid-column: 2 / 3;
  margin: 0;
  font-weight: 400;
  font-size: calc(20 / 750 * 100vw); line-height: calc(32 / 750 * 100vw);
  color: hsl(0, 0%, 0%);
}



@media (min-width:768px), print {/* -- PC */

#cover {
  width: 100%; height: calc(493 / 1536 * 100vw);
  background: url(../image/index/cover_01_pc.webp) center / cover no-repeat;
}

#cover > a {
  width: fit-content; height: calc(30 / 1536 * 100vw);
  inset: auto auto calc(58 / 1536 * 100vw) calc(50% + 449 / 1536 * 100vw);
  padding: 0 calc(43 / 1536 * 100vw) 0 0;
  font-size: calc(14 / 1536 * 100vw);
  transition: color 0.4s;
}
#cover > a::before {
  width: calc(30 / 1536 * 100vw); height: calc(30 / 1536 * 100vw);
  transition: opacity 0.4s;
}
#cover > a::after {
  width: calc(30 / 1536 * 100vw); height: calc(30 / 1536 * 100vw);
  background: url('../image/common/header_03.svg') center / calc(10 / 1536 * 100vw) no-repeat;
  outline: 1px solid hsla(0, 0%, 0%, 1);
  outline-offset: -1px;
  transition: filter 0.4s, outline-color 0.4s;
}
#cover > a:hover {
  color: hsl(222, 100%, 31%);
}
#cover > a:hover::before {
  opacity: 1;
}
#cover > a:hover::after {
  outline: 1px solid hsla(0, 0%, 0%, 0);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}


#importantannouncement {
  padding: min(calc(10 / 1536 * 100vw), 10px) 0 0;
}

#importantannouncement > p {
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: 1;
  text-align: center;
}


#product {
  padding: min(calc(31 / 1536 * 100vw), 31px) 0 min(calc(40 / 1536 * 100vw), 40px);
}

#product > h2,
#specialsite > h2,
#brand > h2,
#support > h2,
#announcement > h2,
#pressrelease > h2,
#pickup > h2 {
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  margin: 0 auto;
  font-size: min(calc(26 / 1536 * 100vw), 26px);
  text-align: left;
}
#product > h2 > a,
#specialsite > h2 > a,
#brand > h2 > a,
#support > h2 > a,
#announcement > h2 > a,
#pressrelease > h2 > a,
#pickup > h2 > a {
  display: flex;
  align-items: center;
  width: fit-content; height: min(calc(31 / 1536 * 100vw), 31px);
  position: relative;
  padding: 0 min(calc((47 - 175 * 36 / 1000) / 1536 * 100vw), calc(47px - 175px * 36 / 1000)) 0 0;
}
#product > h2 > a::before,
#specialsite > h2 > a::before,
#brand > h2 > a::before,
#support > h2 > a::before,
#announcement > h2 > a::before,
#pressrelease > h2 > a::before,
#pickup > h2 > a::before {
  content: '';
  display: block;
  width: min(calc(31 / 1536 * 100vw), 31px); height: min(calc(31 / 1536 * 100vw), 31px);
  position: absolute;
  inset: 0.1em 0 auto auto;
  background: linear-gradient(90deg, hsl(220, 52%, 46%), hsl(221, 90%, 33%));
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s;
}
#product > h2 > a::after,
#specialsite > h2 > a::after,
#brand > h2 > a::after,
#support > h2 > a::after,
#announcement > h2 > a::after,
#pressrelease > h2 > a::after,
#pickup > h2 > a::after {
  content: '';
  display: block;
  width: min(calc(31 / 1536 * 100vw), 31px); height: min(calc(31 / 1536 * 100vw), 31px);
  position: absolute;
  inset: 0.1em 0 auto auto;
  outline: 1px solid hsla(0, 0%, 0%, 1);
  outline-offset: -1px;
  background: url('../image/common/header_03.svg') center / min(calc(10 / 1536 * 100vw), 31px) no-repeat;
  border-radius: 50%;
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
  transition: outline-color 0.4s, filter 0.2s;
}
#product > h2 > a:hover::before,
#specialsite > h2 > a:hover::before,
#brand > h2 > a:hover::before,
#support > h2 > a:hover::before,
#announcement > h2 > a:hover::before,
#pressrelease > h2 > a:hover::before,
#pickup > h2 > a:hover::before {
  opacity: 1;
}
#product > h2 > a:hover::after,
#specialsite > h2 > a:hover::after,
#brand > h2 > a:hover::after,
#support > h2 > a:hover::after,
#announcement > h2 > a:hover::after,
#pressrelease > h2 > a:hover::after,
#pickup > h2 > a:hover::after {
  outline: 1px solid hsla(0, 0%, 0%, 0);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}

#product > menu {
  gap: min(calc(10 / 1536 * 100vw), 10px);
  width: min(calc(1511 / 1536 * 100vw), 1511px);
  margin: min(calc(37 / 1536 * 100vw), 37px) auto 0;
}
#product > menu > li {
  width: min(calc(497 / 1536 * 100vw), 497px); height: min(calc(175 / 1536 * 100vw), 175px);
}
#product > menu > li > a {
  grid-template: auto / auto 1fr;
  gap: min(calc(53 / 1536 * 100vw), 18px);
  padding: min(calc(18 / 1536 * 100vw), 18px) min(calc(71 / 1536 * 100vw), 71px) min(calc(18 / 1536 * 100vw), 18px) min(calc(60 / 1536 * 100vw), 60px);
}
#product > menu > li > a::before {
  content: '';
  display: block;
  width: min(calc(497 / 1536 * 100vw), 497px); height: min(calc(175 / 1536 * 100vw), 175px);
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  transition: opacity 0.4s;
}
#product > menu > li:nth-of-type(1) > a::before {/* -- 筆記具・ステーショナリー */
  background: url('../image/index/product_02_01.webp') center / cover no-repeat;
}
#product > menu > li:nth-of-type(2) > a::before {/* -- 玩具 */
  background: url('../image/index/product_02_02.webp') center / cover no-repeat;
}
#product > menu > li:nth-of-type(3) > a::before {/* -- 宝飾 */
  background: url('../image/index/product_02_03.webp') center / cover no-repeat;
}
#product > menu > li:nth-of-type(4) > a::before {/* -- 産業資材 */
  background: url('../image/index/product_02_04.webp') center / cover no-repeat;
}
#product > menu > li:nth-of-type(5) > a::before {/* -- その他新規商材 */
  background: url('../image/index/product_02_05.webp') center / cover no-repeat;
}
#product > menu > li > a > picture {
  width: min(calc(130 / 1536 * 100vw), 130px);
}
#product > menu > li > a > p {
  grid-row: 1 / 2; grid-column: 2 / 3;
  justify-self: start;
  justify-content: start;
  width: min(calc(183 / 1536 * 100vw), 183px); min-height: min(calc(139 / 1536 * 100vw), 139px);
  margin: 0;
  font-size: min(calc(18 / 1536 * 100vw), 18px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  text-align: left;
  transition: color 0.4s;
}
#product > menu > li > a > p::after {
  width: min(calc(11 / 1536 * 100vw), 11px); height: min(calc(13 / 1536 * 100vw), 13px);
  inset: min(calc(50% - 13 / 2 / 1536 * 100vw + 0.1em) , calc(50% - 13px / 2 + 0.1em)) 0 auto auto;
  transition: filter 0.4s;
}
#product > menu > li > a:hover::before {
  opacity: 1;
}
#product > menu > li > a:hover {
  color: hsl(222, 100%, 31%);
}
#product > menu > li > a:hover > p::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}
#product > menu > li:last-of-type > a {/* -- 一覧を見る */
  width: fit-content; height: min(calc(30 / 1536 * 100vw), 30px);
  padding: 0 min(calc(44 / 1536 * 100vw), 44px) 0 0;
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(30 / 1536 * 100vw), 30px);
}
#product > menu > li:last-of-type > a::before {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: none;
  background: linear-gradient(90deg, hsl(220, 52%, 46%), hsl(221, 90%, 33%));
  filter: none;
}
#product > menu > li:last-of-type > a::after {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: 1px solid hsla(0, 0%, 0%, 1);
  outline-offset: -1px;
  background: url('../image/common/header_03.svg') center / min(calc(10 / 1536 * 100vw), 10px) no-repeat;
  filter: brightness(0) saturate(100%);
  transition: outline-color 0.4s, filter 0.4s;
}
#product > menu > li:last-of-type > a:hover::after {
  outline: 1px solid hsla(0, 0%, 0%, 0);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}


#specialsite {
  padding: min(calc(61 / 1536 * 100vw), 61px) 0 min(calc(62 / 1536 * 100vw), 62px);
}

#specialsite .splide {
  margin: min(calc(35 / 1536 * 100vw), 35px) 0 0;
}
#specialsite .splide .splide__slide {
  opacity: 0.6;
  transition: opacity 0.4s;
}
#specialsite .splide .splide__slide.is-visible {
  opacity: 1;
}
#specialsite .splide .splide__slide > a::after {
  content: '';
  display: block;
  width: min(calc(495 / 1536 * 100vw), 495px); height: min(calc(310 / 1536 * 100vw), 310px);
  box-sizing: border-box;
  position: absolute;
  inset: 0 auto auto 0;
  border: min(calc(15 / 1536 * 100vw), 15px) solid;
  border-image: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%)) 1;
  opacity: 0;
  transition: opacity 0.4s;
}
#specialsite .splide .splide__slide > a > figure > img {
  width: min(calc(495 / 1536 * 100vw), 495px); height: min(calc(310 / 1536 * 100vw), 310px);
}
#specialsite .splide .splide__slide > a > figure > figcaption {
  margin: min(calc(6 / 1536 * 100vw), 6px) 0 0; padding: 0 min(calc(20 / 1536 * 100vw), 20px) 0 min(calc(11 / 1536 * 100vw), 11px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  transition: color 0.4s;
}
#specialsite .splide .splide__slide > a > figure > figcaption::after {
  width: min(calc(10 / 1536 * 100vw), 10px); height: min(calc(13 / 1536 * 100vw), 13px);
  inset: min(calc((24 - 13) / 2 / 1536 * 100vw), calc((24px - 13px) / 2)) min(calc(10 / 1536 * 100vw), 10px) auto auto;
  transition: filter 0.4s;
}
#specialsite .splide .splide__slide > a:hover::after {
  opacity: 0.7;
}
#specialsite .splide .splide__slide > a:hover > figure > figcaption {
  color: hsl(222, 100%, 31%);
}
#specialsite .splide .splide__slide > a:hover > figure > figcaption::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}
#specialsite .splide .splide__pagination {
  gap: 0 min(calc(3 / 1536 * 100vw), 3px);
  width: min(calc(1000 / 1536 * 100vw), 1000px);
  margin: min(calc(38 / 1536 * 100vw), 38px) auto 0;
}
#specialsite .splide .splide__pagination > li > button {
  height: 2px;
  cursor: pointer;
}
#specialsite .splide .splide__pagination > li > button:hover {
  background: hsl(222, 100%, 31%);
}
#specialsite .splide .splide__arrows {
  width: 100%;
  position: absolute;
  inset: min(calc((310 - 54) / 2 / 1536 * 100vw), calc((310px - 54px) / 2)) auto auto 0;
}
#specialsite .splide .splide__arrows > .splide__arrow--prev {
  display: flex;
  juastify-content:center; align-items: center;
  width: min(calc(43 / 1536 * 100vw), 43px); height: min(calc(54 / 1536 * 100vw), 54px);
  position: absolute;
  inset: 0 auto auto 0; z-index: 1;
  appearance: none;
  background: hsla(0, 0%, 0%, 0.5);
  border: none;
  border-radius: 0 min(calc(5 / 1536 * 100vw), 5px) min(calc(5 / 1536 * 100vw), 5px) 0;
  cursor: pointer;
  transition: background 0.4s;
}
#specialsite .splide .splide__arrows > .splide__arrow--prev::before {
  content: '';
  display: block;
  width: 100%; height: 100%;
  position: absolute;
  inset: 0 auto auto 0;
  background: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%));
  border-radius: 0 min(calc(5 / 1536 * 100vw), 5px) min(calc(5 / 1536 * 100vw), 5px) 0;
  opacity: 0;
  transition: opacity 0.4s;
}
#specialsite .splide .splide__arrows > .splide__arrow--prev > svg {
  transform: scale(-1,1);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}
#specialsite .splide .splide__arrows > .splide__arrow--next {
  display: flex;
  juastify-content:center; align-items: center;
  width: min(calc(43 / 1536 * 100vw), 43px); height: min(calc(54 / 1536 * 100vw), 54px);
  position: absolute;
  inset: 0 0 auto auto; z-index: 1;
  appearance: none;
  background: hsla(0, 0%, 0%, 0.5);
  border: none;
  border-radius: min(calc(5 / 1536 * 100vw), 5px) 0 0 min(calc(5 / 1536 * 100vw), 5px);
  cursor: pointer;
  transition: background 0.4s;
}
#specialsite .splide .splide__arrows > .splide__arrow--next::before {
  content: '';
  display: block;
  width: 100%; height: 100%;
  position: absolute;
  inset: 0 auto auto 0;
  background: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%));
  border-radius: min(calc(5 / 1536 * 100vw), 5px) 0 0 min(calc(5 / 1536 * 100vw), 5px);
  opacity: 0;
  transition: opacity 0.4s;
}
#specialsite .splide .splide__arrows > .splide__arrow--next > svg {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}
#specialsite .splide .splide__arrows > .splide__arrow--prev:hover,
#specialsite .splide .splide__arrows > .splide__arrow--next:hover {
  background: hsla(0, 0%, 0%, 0);
}
#specialsite .splide .splide__arrows > .splide__arrow--prev:hover::before,
#specialsite .splide .splide__arrows > .splide__arrow--next:hover::before {
  opacity: 0.5;
}
#specialsite > a,
#brand > a,
#announcement > a:nth-of-type(1),/* -- 一覧を見る */
#pressrelease > a:nth-of-type(2),/* -- 一覧を見る */
#pickup > a {
  width:fit-content; height: min(calc(30 / 1536 * 100vw), 30px);
  margin: min(calc(20 / 1536 * 100vw), 20px) max(calc((100% - 1200px) / 2), calc((1536px - 1200px) / 2)) 0 auto; padding: 0 min(calc(44 / 1536 * 100vw), 44px) 0 0;
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(30 / 1536 * 100vw), 30px);
  transition: color 0.4s;
}
#specialsite > a::before,
#brand > a::before,
#announcement > a:nth-of-type(1)::before,
#pressrelease > a:nth-of-type(2)::before,
#pickup > a::before {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: none;
  background: linear-gradient(90deg, hsl(220, 52%, 46%), hsl(221, 90%, 33%));
  filter: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#specialsite > a::after,
#brand > a::after,
#announcement > a:nth-of-type(1)::after,
#pressrelease > a:nth-of-type(2)::after,
#pickup > a::after {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: 1px solid hsl(0, 0%, 0%);
  outline-offset: -1px;
  background: url('../image/common/header_03.svg') center / min(calc(10 / 1536 * 100vw), 10px) no-repeat;
  border-radius: 50%;
  transition: outline-color 0.4s, filter 0.4s;
}
#specialsite > a:hover,
#brand > a:hover,
#announcement > a:nth-of-type(1):hover,
#pressrelease > a:nth-of-type(2):hover,
#pickup > a:hover {
  color: hsl(222, 100%, 31%);
}
#specialsite > a:hover::before,
#brand > a:hover::before,
#announcement > a:nth-of-type(1):hover::before,
#pressrelease > a:nth-of-type(2):hover::before,
#pickup > a:hover::before {
  opacity: 1;
}
#specialsite > a:hover::after,
#brand > a:hover::after,
#announcement > a:nth-of-type(1):hover::after,
#pressrelease > a:nth-of-type(2):hover::after,
#pickup > a:hover::after {
  outline: 1px solid hsla(0, 0%, 0%, 0);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}


#brand {
  padding: min(calc(59 / 1536 * 100vw), 59px) 0 min(calc(61 / 1536 * 100vw), 61px);
}

#brand > menu {
  gap: min(calc(10 / 1536 * 100vw), 10px);
  justify-content: center;
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  margin: min(calc(36 / 1536 * 100vw), 36px) auto 0;
}
#brand > menu > li {
  width: min(calc(291 / 1536 * 100vw), 291px);
}
#brand > menu > li > a {
  padding: min(calc(6 / 1536 * 100vw), 6px) 0 min(calc(10 / 1536 * 100vw), 10px);
  border-radius: min(calc(5 / 1536 * 100vw), 5px);
}
#brand > menu > li > a::after {
  content: '';
  display: block;
  width: min(calc(279 / 1536 * 100vw), 279px); height: min(calc(175 / 1536 * 100vw), 175px);
  box-sizing: border-box;
  position: absolute;
  inset: min(calc(6 / 1536 * 100vw), 6px) auto auto min(calc(6 / 1536 * 100vw), 6px);
  border: min(calc(15 / 1536 * 100vw), 15px) solid;
  border-image: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%)) 1;
  opacity: 0;
  transition: opacity 0.4s;
}
#brand > menu > li > a > figure {
  width: min(calc(279 / 1536 * 100vw), 279px);
}
#brand > menu > li > a > figure > img {
  width: min(calc(279 / 1536 * 100vw), 279px); height: min(calc(175 / 1536 * 100vw), 175px);
}
#brand > menu > li > a > figure > figcaption {
  min-height: min(calc(24 * 2 / 1536 * 100vw), calc(24px * 2));
  margin: min(calc(3 / 1536 * 100vw), 3px) 0 0; padding: 0 min(calc(20 / 1536 * 100vw), 20px) 0 min(calc(10 / 1536 * 100vw), 10px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  transition: color 0.4s;
}
#brand > menu > li > a > figure > figcaption::after {
  width: min(calc(10 / 1536 * 100vw), 10px); height: min(calc(13 / 1536 * 100vw), 13px);
  inset: min(calc((24 - 13) / 2 / 1536 * 100vw), calc((24px - 13px) / 2)) min(calc(10 / 1536 * 100vw), 10px) auto auto;
  transition: filter 0.4s;
}
#brand > menu > li > a:hover::after {
  opacity: 0.7;
}
#brand > menu > li > a:hover > figure > figcaption {
  color: hsl(222, 100%, 31%);
}
#brand > menu > li > a:hover > figure > figcaption::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}


#support {
  padding: min(calc(56 / 1536 * 100vw), 56px) 0 min(calc(120 / 1536 * 100vw), 120px);
}

#support > menu {
  gap: min(calc(10 / 1536 * 100vw), 10px);
  width: min(calc(1090 / 1536 * 100vw), 1090px);
  margin: min(calc(37 / 1536 * 100vw), 37px) auto 0;
}
#support > menu > li {
  width: min(calc(210 / 1536 * 100vw), 210px);
}
#support > menu > li > a {
  padding: min(calc(22 / 1536 * 100vw), 22px) 0 min(calc(50 / 1536 * 100vw), 50px);
  border-radius: min(calc(5 / 1536 * 100vw), 5px);
  transition: color 0.4s;
}
#support > menu > li > a::before {
  content: '';
  display: block;
  width: 100%; height: 100%;
  position: absolute;
  inset: 0 auto auto 0;
  background: linear-gradient(135deg, hsl(220, 52%, 47%), hsl(221, 90%, 33%));
  border-radius: min(calc(5 / 1536 * 100vw), 5px);
  opacity: 0;
  transition: opacity 0.4s;
}
#support > menu > li > a > img {
  width: min(calc(120 / 1536 * 100vw), 120px);
  transition: filter 0.4s;
}
#support > menu > li > a > p {
  margin: min(calc(2 / 1536 * 100vw), 2px) auto 0;
  font-size: min(calc(16 / 1536 * 100vw), 16px);
  transition: color 0.4s;
}
#support > menu > li > a:hover::before {
  opacity: 1;
}
#support > menu > li > a:hover > img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}
#support > menu > li > a:hover > p {
  color: hsl(0, 0%, 100%);
}


#companyinformation {
  width: 100%; height: calc(400 / 1536 * 100vw);
  padding: calc(158 / 1536 * 100vw) 0 0;
  background: url('../image/index/companyinformation_01_pc.webp') center / cover no-repeat;
}

#companyinformation > h2 {
  margin: 0 0 0 max(calc(50% - 312 / 1536 * 100vw), calc(50% - 312px));
  font-size: min(calc(26 / 1536 * 100vw), 26px);
}

#companyinformation > a {
  height: min(calc(30 / 1536 * 100vw), 30px);
  margin: min(calc(24 / 1536 * 100vw), 24px) 0 0 max(calc(50% - 306 / 1536 * 100vw), calc(50% - 306px)); padding: 0 min(calc(37 / 1536 * 100vw), 37px) 0 0;
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(30 / 1536 * 100vw), 30px);
  transition: color 0.4s;
}
#companyinformation > a::before {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: none;
  background: linear-gradient(90deg, hsl(220, 52%, 46%), hsl(221, 90%, 33%));
  filter: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#companyinformation > a::after {
  width: min(calc(30 / 1536 * 100vw), 30px); height: min(calc(30 / 1536 * 100vw), 30px);
  outline: 1px solid hsl(0, 0%, 0%);
  outline-offset: -1px;
  background: url('../image/common/header_03.svg') center / min(calc(10 / 1536 * 100vw), 10px) no-repeat;
  border-radius: 50%;
  transition: outline-color 0.4s, filter 0.4s;
}
#companyinformation > a:hover {
  color: hsl(222, 100%, 31%);
}
#companyinformation > a:hover::before {
  opacity: 1;
}
#companyinformation > a:hover::after {
  outline: 1px solid hsla(0, 0%, 0%, 0);
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(219deg) brightness(100%) contrast(100%);
}


#announcement {
  padding: min(calc(58 / 1536 * 100vw), 58px) 0 min(calc(59 / 1536 * 100vw), 59px);
}

#announcement > dl {
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  margin: min(calc(14 / 1536 * 100vw), 14px) auto 0;
}
#announcement > dl > dt {
  width: calc(145 / 1200 * 100%);
  padding: min(calc(21 / 1536 * 100vw), 21px) 0 min(calc(19 / 1536 * 100vw), 19px) min(calc(36 / 1536 * 100vw), 36px); 
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: 1.2;
  border-bottom: 1px solid hsl(0, 0%, 75%);
  transition: color 0.4s;
}
#announcement > dl > dd {
  width: calc(100% - (145 / 1200 * 100%));
  text-overflow: ellipsis;
  margin: 0; padding: min(calc(21 / 1536 * 100vw), 21px) 0 min(calc(19 / 1536 * 100vw), 19px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: 1.2;
  border-bottom: 1px solid hsl(0, 0%, 75%);
}
#announcement > dl > dd > a {
  transition: color 0.4s;
}
#announcement > dl > dt:has(+ dd > a:hover) {
  color: hsl(222, 100%, 31%);
}
#announcement > dl > dd > a:hover {
  color: hsl(222, 100%, 31%);
}

#announcement > a:nth-of-type(2) {/* -- 「キャップレスＬＳ」の不具合について */
  margin: min(calc(15 / 1536 * 100vw), 15px) max(calc((100% - 1200px) / 2), calc((1536px - 1200px) / 2)) 0 auto; padding: 0 0 0 min(calc(15 / 1536 * 100vw), 15px);
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(16 / 1536 * 100vw), 16px);
  transition: color 0.4s;
}
#announcement > a:nth-of-type(2)::after {
  content: '';
  display: block;
  width: min(calc(11 / 1536 * 100vw), 11px); height: min(calc(13 / 1536 * 100vw), 13px);
  position: absolute;
  inset: min(calc((16 - 13) / 2 / 1536 * 100vw), calc((16px - 13px) / 2)) auto auto 0;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
  transition: filter 0.4s;
}
#announcement > a:nth-of-type(2):hover {
  color: hsl(222, 100%, 31%);
}
#announcement > a:nth-of-type(2):hover::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}


#pressrelease {
  padding: min(calc(70 / 1536 * 100vw), 70px) 0 min(calc(60 / 1536 * 100vw), 60px);
}

#pressrelease > a:nth-of-type(1) {/* -- 玩具プレスリリースはこちら */
  width: min(calc(250 / 1536 * 100vw), 250px); height: min(calc(39 / 1536 * 100vw), 39px);
  margin: max(calc(-41 / 1536 * 100vw), -41px) max(calc((100% - 1200px) / 2), calc((1536px - 1200px) / 2)) 0 auto;
  font-size: min(calc(16 / 1536 * 100vw), 16px);
  outline: 1px solid hsl(0, 1%, 48%);
  outline-offset: -1px;
  border-radius: min(calc(6 / 1536 * 100vw), 6px);
  transition: color 0.4s, outline 0.4s;
}
#pressrelease > a:nth-of-type(1):hover {
  color: hsl(222, 100%, 31%);
  outline: 1px solid hsl(222, 100%, 31%);
}

#pressrelease > dl {
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  margin: min(calc(8 / 1536 * 100vw), 8px) auto 0;
}
#pressrelease > dl > dt {
  margin: 0 0 0 min(calc(40 / 1536 * 100vw), 40px); padding: min(calc(29 / 1536 * 100vw), 29px) 0 0;
  font-size: min(calc(16 / 1536 * 100vw), 16px);
}
#pressrelease > dl > dd {
  gap: min(calc(19 / 1536 * 100vw), 19px) min(calc(40 / 1536 * 100vw), 40px);
  margin: max(calc(-16 / 1536 * 100vw), -16px) 0 0; padding: 0 0 min(calc(29 / 1536 * 100vw), 29px);
  border-bottom: 1px solid hsl(0, 0%, 75%);
  transition: color 0.4s;
}
#pressrelease > dl > dd::before {/* -- カテゴリ */
  width: min(calc(120 / 1536 * 100vw), 120px); height: min(calc(24 / 1536 * 100vw), 24px);
  margin: 0 0 0 min(calc(40 / 1536 * 100vw), 40px);
  font-size: min(calc(14 / 1536 * 100vw), 14px);
  border-radius: min(calc(5 / 1536 * 100vw), 5px);
}
#pressrelease > dl > dd > a:nth-of-type(1) {/* -- タイトル */
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: fit-content;
  margin: min(calc(26 / 1536 * 100vw), 26px) 0 0 min(calc(40 / 1536 * 100vw), 40px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  transition: color 0.4s;
}
#pressrelease > dl > dd > a:nth-of-type(2) {/* -- 画像 */
  width: min(calc(132 / 1536 * 100vw), 132px); height: min(calc(93 / 1536 * 100vw), 93px);
  margin: 0 min(calc(40 / 1536 * 100vw), 40px) 0 0;
}
#pressrelease > dl > dt:has(+ dd > a:hover) {
  color: hsl(222, 100%, 31%);
}
#pressrelease > dl > dd:has(> a:hover) > a:nth-of-type(1) {
  color: hsl(222, 100%, 31%);
}

#pressrelease > a:nth-of-type(2) {/* -- 一覧を見る */
  margin: min(calc(29 / 1536 * 100vw), 29px) max(calc((100% - 1200px) / 2), calc((1536px - 1200px) / 2)) 0 auto;
}


#pickup {
  padding: min(calc(59 / 1536 * 100vw), 59px) 0 min(calc(61 / 1536 * 100vw), 61px);
  background: url('../image/index/pickup_01_pc.webp') center top / cover no-repeat;
}

#pickup > menu {
  gap: min(calc(10 / 1536 * 100vw), 10px);
  width: min(calc(1200 / 1536 * 100vw), 1200px);
  margin: min(calc(37 / 1536 * 100vw), 37px) auto 0;
}
#pickup > menu > li {
  width: min(calc(292 / 1536 * 100vw), 292px);
}
#pickup > menu > li > a {
  padding: min(calc(6 / 1536 * 100vw), 6px) 0 min(calc(27 / 1536 * 100vw), 27px);
  border-radius: min(calc(5 / 1536 * 100vw), 5px);
}
#pickup > menu > li > a::after {
  content: '';
  display: block;
  width: min(calc(279 / 1536 * 100vw), 279px); height: min(calc(175 / 1536 * 100vw), 175px);
  box-sizing: border-box;
  position: absolute;
  inset: min(calc(6 / 1536 * 100vw), 6px) auto auto min(calc(6 / 1536 * 100vw), 6px);
  border: min(calc(15 / 1536 * 100vw), 15px) solid;
  border-image: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%)) 1;
  opacity: 0;
  transition: opacity 0.4s;
}
#pickup > menu > li > a > figure {
  width: min(calc(279 / 1536 * 100vw), 279px);
}
#pickup > menu > li > a > figure > img {
  width: min(calc(279 / 1536 * 100vw), 279px); height: min(calc(175 / 1536 * 100vw), 175px);
}
#pickup > menu > li > a > figure > figcaption {
  margin: min(calc(11 / 1536 * 100vw), 11px) 0 0; padding: 0 min(calc(20 / 1536 * 100vw), 20px) 0 min(calc(10 / 1536 * 100vw), 10px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  transition: color 0.4s;
}
#pickup > menu > li > a > figure > figcaption::after {
  width: min(calc(10 / 1536 * 100vw), 10px); height: min(calc(13 / 1536 * 100vw), 13px);
  inset: min(calc((24 - 13) / 2 / 1536 * 100vw), calc((24px - 13px) / 2)) min(calc(9 / 1536 * 100vw), 9px) auto auto;
  background: url('../image/common/header_03.svg') center / 100% no-repeat;
  filter: brightness(0) saturate(100%);
  transition: filter 0.4s;
}
#pickup > menu > li > a > p {
  width: min(calc(258 / 1536 * 100vw), 258px);
  margin: min(calc(12 / 1536 * 100vw), 12px) auto 0;
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(22 / 1536 * 100vw), 22px);
}
#pickup > menu > li > a:hover::after {
  opacity: 0.7;
}
#pickup > menu > li > a:hover > figure > figcaption {
  color: hsl(222, 100%, 31%);
}
#pickup > menu > li > a:hover > figure > figcaption::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}

#pickup > a {
  margin: min(calc(16 / 1536 * 100vw), 16px) max(calc((100% - 1200px) / 2), calc((1536px - 1200px) / 2)) 0 auto;
}


#introduce {
  padding: min(calc(61 / 1536 * 100vw), 61px) 0 min(calc(56 / 1536 * 100vw), 56px);
}

#introduce > menu {
  gap: min(calc(18 / 1536 * 100vw), 18px);
  width: min(calc(1200 / 1536 * 100vw), 1200px);
}
#introduce > menu > li {
  width: min(calc(288 / 1536 * 100vw), 288px);
}
#introduce > menu > li > a {
  grid-template: auto auto 1fr / auto;
  gap: min(calc(13 / 1536 * 100vw), 13px);
}
#introduce > menu > li > a::after {
  content: '';
  display: block;
  width: min(calc(288 / 1536 * 100vw), 288px); height: min(calc(182 / 1536 * 100vw), 182px);
  box-sizing: border-box;
  position: absolute;
  inset: 0 auto auto 0;
  border: min(calc(15 / 1536 * 100vw), 15px) solid;
  border-image: linear-gradient(90deg, hsl(221, 85%, 34%), hsl(219, 80%, 60%)) 1;
  opacity: 0;
  transition: opacity 0.4s;
}
#introduce > menu > li > a > img {
  grid-row: 1 / 2; grid-column: 1 / 2;
  width: min(calc(288 / 1536 * 100vw), 288px); height: auto;
}
#introduce > menu > li > a > h6 {
  grid-row: 2 / 3; grid-column: 1 / 2;
  padding: 0 min(calc(19 / 1536 * 100vw), 19px) 0 min(calc(9 / 1536 * 100vw), 9px);
  font-size: min(calc(16 / 1536 * 100vw), 16px); line-height: min(calc(24 / 1536 * 100vw), 24px);
  transition: color 0.4s;
}
#introduce > menu > li > a > h6::after {
  width: min(calc(10 / 1536 * 100vw), 10px); height: min(calc(13 / 1536 * 100vw), 13px);
  inset: min(calc((24 - 13) / 2 / 1536 * 100vw), calc((24px - 13px) / 2)) min(calc(10 / 1536 * 100vw), 10px) auto auto;
  transition: filter 0.4s;
}
#introduce > menu > li > a > p {
  grid-row: 3 / 4; grid-column: 1 / 2;
  padding: 0 min(calc(9 / 1536 * 100vw), 9px);
  font-size: min(calc(14 / 1536 * 100vw), 14px); line-height: min(calc(22 / 1536 * 100vw), 22px);
}
#introduce > menu > li > a:hover::after {
  opacity: 0.7;
}
#introduce > menu > li > a:hover > h6 {
  color: hsl(222, 100%, 31%);
}
#introduce > menu > li > a:hover > h6::after {
  filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(7140%) hue-rotate(219deg) brightness(85%) contrast(108%);
}

}/* -- /@media (min-width:768px), print */