@charset "utf-8";
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
:root {
  --color-twelite: #E4007F;
  --winered: #88004C;
  --burgundy: #2B0319;
  --lightgreen: #2F9693;
  --darkgreen: #216D6B;
  --lightorange: #FFD230;
  --darkorange: #CA6F00;
  --gold: #CDC2AE;
  --purple: #9557D9;
  --gray: #585358;
}
/* background color
--------------------------------------------------*/
.bg-app-one4all {
  background: linear-gradient(73deg, hsl(36deg 30% 43%) 0%, hsl(40deg 32% 49%) 8%, hsl(42deg 34% 55%) 17%, hsl(45deg 35% 62%) 25%, hsl(50deg 56% 74%) 33%, hsl(56deg 77% 86%) 42%, hsl(60deg 100% 99%) 50%, hsl(56deg 77% 86%) 58%, hsl(50deg 56% 74%) 67%, hsl(45deg 35% 62%) 75%, hsl(42deg 34% 55%) 83%, hsl(40deg 32% 49%) 92%, hsl(36deg 30% 43%) 100%);
}
.bg-app-twelite {
  background: radial-gradient(circle, rgba(166, 57, 106, 1.0) 0%, rgba(99, 6, 60, 1.0) 100%);
}
.bg-app-aria {
  background: radial-gradient(circle, #AC284E 0%, #8e2141 100%);
}
.bg-app-cue {
  background: radial-gradient(circle, #223776 0%, #16244b 100%);
}
.bg-app-uart {
  background: radial-gradient(circle, #40782F 0%, #1F3C17 100%);
}
.bg-app-wings {
  background: radial-gradient(at 50%, #75698B 0%, #231F29 45%);
}
.bg-app-pal {
  background: radial-gradient(circle, #D46570 0%, #CB4755 100%);
}
.bg-aria {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, rgba(214, 43, 61, 1.00) 100%);
}
.bg-cue {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, rgba(54, 64, 235, 1.00) 100%);
}
.bg-pal {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, hsla(354, 72%, 60%, 1.00) 100%);
}
.bg-stick {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, rgba(89, 136, 30, 1.00) 100%);
}
.bg-spot {
  background: linear-gradient(-30deg, rgba(0, 13, 31, 1.00) 0%, rgba(34, 130, 162, 1.00) 100%);
}
.bg-stage {
  background: radial-gradient(circle, #F438A6 0%, #260516 100%);
}
.bg-stage-app {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 136, 117, 1) 100%);
}
.bg-r {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, rgba(161, 162, 34, 1.00) 100%);
}
.bg-kit {
  background: linear-gradient(-30deg, rgba(31, 24, 0, 1.00) 0%, rgba(204, 117, 9, 1.00) 100%);
}
.bg-antenna {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(151, 151, 151, 1.00) 100%);
}
.bg-list {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(58, 129, 175, 1.00) 100%);
}
.bg-spec {
  background: linear-gradient(120deg, rgba(255, 239, 205, 1.00) 0%, #620D00 100%);
}
.bg-interactive {
  background: radial-gradient(circle, #742876 0%, #351136 100%);
}
.bg-write {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 136, 117, 1) 100%);
}
.bg-act {
  background: radial-gradient(circle, #517198 0%, #231F29 100%);
}
.bg-software {
  background: linear-gradient(-30deg, hsla(280, 23%, 10%, 1.00) 0%, rgba(140, 139, 94, 0.70) 100%);
}
.bg-wot, .bg-casestudies, .bg-select, .bg-starter {
  background: linear-gradient(-30deg, rgba(154, 25, 169, 1.00) 0%, rgba(150, 95, 23, 1.00) 100%);
}
.bg-small, .bg-lowpower, .bg-many {
  background: linear-gradient(-30deg, rgba(93, 0, 104, 1.00) 0%, rgba(84, 27, 150, 1.00) 100%);
}
.bg-control, .bg-monitor {
  background: linear-gradient(-30deg, hsla(265, 100%, 10%, 1.00) 0%, hsla(171, 66%, 24%, 1.00) 100%);
}
.bg-parent, .bg-router, .bg-child {
  background: linear-gradient(-30deg, hsla(150, 19%, 11%, 1.00) 0%, hsla(152, 23%, 32%, 1.00) 100%);
}
.shadowed-img img {
  filter: drop-shadow(5px 5px 5px #231815);
}
/* slide selector
--------------------------------------------------*/
.slide-selector {
  height: 500px;
  margin: 20px;
  border: solid 1px var(--lightgreen);
  background: hsla(0, 0%, 100%, 0.50);
}
.slide-selector ul li {
  display: block;
  list-style: none;
  border: solid 1px var(--lightgreen);
}
/* Icons box
--------------------------------------------------*/
.icons-box {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 0rem 0.5rem;
}
.icons-box-scroll {
  overflow: scroll;
  padding-bottom: 50px;
}
/*---------------*/
.product-icon {
  display: inline-block;
  width: 62px;
  height: 62px;
  border-radius: 20%;
  box-shadow: 0px 0px 0px 0.5px hsla(13, 100%, 30%, 1.00), 0px 0px 0px 1px hsla(13, 90%, 55%, 1.00), 0px 0px 0px 1.5px hsla(0, 0%, 100%, 1.00), 0px 0px 0px 2px hsla(13, 90%, 55%, 1.00), 0px 0px 0px 2.5px hsla(13, 100%, 30%, 1.00), 0px 0px 3px 3.5px rgba(0, 0, 0, 0.3);
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));	
  margin: 1rem 0.5rem;
}
.product-icon img {
  width: 62px;
  height: 62px;
}
.product-icon figcaption {
  width: 84px;
  margin-top: -2px;
  margin-left: -12px;
  font-size: 13px;
  letter-spacing: -0.06em;
  text-align: center;
  line-height: 1;
}
/* Carousel slider
--------------------------------------------------*/
.carousel-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.carousel-slider8 img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.carousel-slider .slide-wrap {
  width: 1000%;
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  z-index: 0;
  animation: carousel-slider 40s cubic-bezier(0.200, 0.060, 0.270, 0.705) infinite;
  animation-delay: 2s;
}
.carousel-slider .slide-wrap-main {
  width: 100%;
  z-index: 1;
  animation: carousel-slider-main 40s cubic-bezier(0.200, 0.060, 0.270, 0.705) infinite;
  animation-delay: 2s;
}
.carousel-slider .slide {
  width: 100%;
}
@keyframes carousel-slider {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(calc(1 / 10 * -100%));
  }
  10% {
    transform: translateX(calc(1 / 10 * -100%));
  }
  15% {
    transform: translateX(calc(2 / 10 * -100%));
  }
  20% {
    transform: translateX(calc(2 / 10 * -100%));
  }
  25% {
    transform: translateX(calc(3 / 10 * -100%));
  }
  30% {
    transform: translateX(calc(3 / 10 * -100%));
  }
  35% {
    transform: translateX(calc(4 / 10 * -100%));
  }
  40% {
    transform: translateX(calc(4 / 10 * -100%));
  }
  45% {
    transform: translateX(calc(5 / 10 * -100%));
  }
  50% {
    transform: translateX(calc(5 / 10 * -100%));
  }
  55% {
    transform: translateX(calc(6 / 10 * -100%));
  }
  60% {
    transform: translateX(calc(6 / 10 * -100%));
  }
  65% {
    transform: translateX(calc(7 / 10 * -100%));
  }
  70% {
    transform: translateX(calc(7 / 10 * -100%));
  }
  75% {
    transform: translateX(calc(8 / 10 * -100%));
  }
  80% {
    transform: translateX(calc(8 / 10 * -100%));
  }
  85% {
    transform: translateX(calc(9 / 10 * -100%));
  }
  90% {
    transform: translateX(calc(9 / 10 * -100%));
  }
  95% {
    transform: translateX(calc(10 / 10 * -100%));
  }
  100% {
    transform: translateX(calc(10 / 10 * -100%));
  }
}
@keyframes carousel-slider-main {
  0% {
    transform: translateX(100%);
  }
  90% {
    transform: translateX(100%);
  }
  95% {
    transform: translateX(0%);
  }
}
/* Button selection
--------------------------------------------------*/
.Button a {
  display: block;
  width: 90%;
  padding: 0.5rem;
  border-radius: 0.75rem;
  margin: 1rem auto;
  text-align: right;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  text-decoration: none;
  color: var(--darkgreen);
  background: linear-gradient(0deg, hsla(160, 20%, 55%, 0.90) 0%, hsla(160, 20%, 90%, 0.90) 30%, hsla(160, 20%, 100%, 0.90) 40%, hsla(160, 20%, 100%, 0.90) 60%, hsla(160, 20%, 90%, 0.90) 70%, hsla(160, 20%, 80%, 0.90) 100%);
  box-shadow: 0px 0px 0px 0.5px var(--darkgreen), 0px 0px 0px 1px var(--lightgreen), 0px 0px 0px 1.5px white, 0px 0px 0px 2px var(--lightgreen), 0px 0px 0px 2.5px var(--darkgreen), 0px 0px 3px 3.5px rgba(0, 0, 0, 0.3);
  filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.5));	
}
.Button a::after {
  content: '\276f';
  padding: 0 0.5rem;
  transition: all 500ms ease-in-out;
}
.Button a:hover {
  background: rgba(255, 255, 255, 0.80);
  color: var(--darkorange);	
}
.Button:hover a::after {
  color: var(--purple);
  padding-right: 0px;
  transition: all 500ms ease-in-out;
}
.Button a:active {
  filter:drop-shadow(1px 3px 3px rgba(0, 0, 0, 0));
}
/* datasheet button
--------------------------------------------------*/
.button-datasheet a {
  display: block;
  width: 220px;
  height: 46px;
  margin: 1rem auto;
  line-height: 2.5;
  text-align: center;
  border: 2px solid var(--lightgreen);
  border-radius: 23px;
  color: var(--darkgreen);
  text-decoration: none;
  background-color: rgba(246, 246, 247, 0.7);
}
.button-datasheet a:hover {
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 40px 40px var(--lightgreen) inset;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out, border 500ms ease-in-out;
}
/* table spec selection
--------------------------------------------------*/
.spec-selection {
  width: 100%;
  border-collapse: collapse;
}
.spec-selection tr {
  background: rgba(0, 17, 152, 0.50);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.spec-selection th {
  font-size: 0.9rem;
  color: rgba(255, 254, 163, 1.00);
}
.spec-selection td {
  padding: 10px 0px;
  font-size: 0.7rem;
  color: azure;
}
.spec-selection figcaption {
  line-height: 0.5rem;
}
.grayed-out:not(:hover) {
  filter: grayscale(100%) brightness(1.5) contrast(20%);
}
:is(.spec-icon, .app-icon, .sensor-icon, .product-icon):hover:has(a) {
  filter: brightness(1.5) drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));;
  cursor: pointer;
}
:is(.spec-icon, .app-icon, .sensor-icon, .product-icon):not(a) {
  cursor: no-drop;
}
:is(.spec-icon, .app-icon, .sensor-icon, .product-icon):active:has(a) {
  filter: brightness(1.8) drop-shadow(1px 3px 5px rgba(0, 0, 0, 0));;
  cursor: pointer;
}
/*---------------*/
.spec-icon {
  display: inline-block;
  width: 62px;
  height: 62px;
  border-radius: 20%;
  background-image: linear-gradient(90deg, rgba(255, 239, 205, 1.00) 0%, #620D00 100%);
  box-shadow: 0px 0px 0px 0.5px hsla(13, 100%, 30%, 1.00), 0px 0px 0px 1px hsla(13, 90%, 55%, 1.00), 0px 0px 0px 1.5px hsla(0, 0%, 100%, 1.00), 0px 0px 0px 2px hsla(13, 90%, 55%, 1.00), 0px 0px 0px 2.5px hsla(13, 100%, 30%, 1.00), 0px 0px 3px 3.5px rgba(0, 0, 0, 0.3);
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));	
}
/*---------------*/
.app-icon {
  display: inline-block;
  width: 65px;
  height: 65px;
  border-radius: 50vh;
  box-shadow: 0px 0px 0px 0.5px hsla(50, 87%, 30%, 1.00), 0px 0px 0px 1.0px hsla(50, 47%, 65%, 1.00), 0px 0px 0px 1.5px hsla(49, 100%, 96%, 1.00), 0px 0px 0px 2.0px hsla(50, 47%, 65%, 1.00), 0px 0px 0px 2.5px hsla(50, 91%, 27%, 1.00), 0px 0px 3px 3.5px rgba(0, 0, 0, 0.3);
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));	
}
/*---------------*/
.sensor-icon {
  display: inline-block;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 0.5px hsla(0, 0%, 50%, 1.00), 0px 0px 0px 1.0px hsla(0, 0%, 70%, 1.00), 0px 0px 0px 1.5px hsla(0, 0%, 100%, 1.00), 0px 0px 0px 2.0px hsla(0, 0%, 70%, 1.00), 0px 0px 0px 2.5px hsla(0, 0%, 50%, 1.00), 0px 0px 3px 3.5px rgba(0, 0, 0, 0.3);
  filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));	
}
/*--------------------------------------------------*/
.columns {
  margin: 1rem 1rem;
  columns: 23rem;
  column-rule: 3px double #BFA59B;
  column-gap: 2em;
}
#main .columns p {
  margin-top: 0px;
}
/*--------------------------------------------------*/
.product-spec {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: 1fr;
}
.product-photo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(28, 0, 140, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(7, 0, 47, 0.60) 120%);
  background-blend-mode: multiply;
}
.product-photo img {
  width: 90%;
  max-width: 300px;
  max-height: 300px;
  filter: drop-shadow(3px 3px 3px #231815);	
}
.product-desc {
  width: 100%;
}
.product-shoplist {
  width: 100%;
}
/*--------------------------------------------------*/
.cloud-box {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.cloud {
  position: absolute;
  width: 100%;
  height: 300px;
  bottom: 70%;
}
#cloud-back {
  filter: url(#filter-back);
  box-shadow: 0px 400px 100px 10px rgba(255, 255, 255, 0.95);
}
#cloud-mid {
  filter: url(#filter-mid);
  box-shadow: 0px 300px 70px -80px rgba(255, 148, 169, 0.80);
}
#cloud-front {
  filter: url(#filter-front);
  box-shadow: 0px 500px 60px -100px rgba(221, 146, 49, 0.80);
}
/*--------------------------------------------------*/
.hero-img-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-left: -6px;
  overflow: hidden;
}
.hero-img-fill img {
  width: 96%;
  object-fit: fill;
  padding-bottom: 12vh;
  filter: drop-shadow(2px 2px 10px #0062DE) drop-shadow(0px 0px 10px #00A5FF);
}
.hero-product-img {
  position: absolute;
  top: 0;
  left: 0;
  width: min(40%, 500px);
  margin-left: 30%;
}
.hero-product-img img {
  filter: drop-shadow(0px 20px 20px hsla(214, 100%, 44%, 0.55));
}
#bg-img-spot {
  background-image: linear-gradient(45deg, hsla(4, 100%, 74%, 1.00) 0%, hsla(265, 59%, 47%, 1.00) 60%, hsla(215, 100%, 30%, 1.00) 100%);
}
.hero-product-text-spot {
  width: 100%;
  position: absolute;
  bottom: 10%;
  font-size: 1.5em;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-feature-settings: "palt";
  animation: hero-product-text 2s linear;
  -webkit-animation: hero-product-text 2s linear;
  text-shadow: 0px 0px 1px #313131;
}
#bg-light-gray {
  background: radial-gradient(circle, rgba(138, 138, 138, 0.5) 0%, rgba(116, 116, 116, 0.5) 100%);
}
#bg-dark-green {
  background: radial-gradient(circle, rgba(67, 92, 77, 0.50) 0%, rgba(81, 134, 116, 0.50) 100%);
}
/*--------------------------------------------------*/
.product-profile {
  margin: 0px;
  overflow: hidden;
  background-color: rgba(159, 251, 245, 0.50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.5' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(75deg, rgba(161, 111, 255, 0.50) 10%, rgba(233, 148, 255, 0.50) 80%, rgba(184, 64, 231, 0.50) 100%), radial-gradient(20% 80%, rgba(255, 255, 255, 0.1) 0%, rgba(160, 144, 255, 0.10) 100%);
  background-blend-mode: multiply;
  border: 1px solid #F6AB4E;
  border-radius: 1rem;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  .product-profile {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.1' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E");
    background-color: rgba(3, 93, 87, 0.50);
  }
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
  padding: 20px;
}
.grid-2p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
  padding: 20px;
}
.grid-3p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
  padding: 20px;
}
.grid-4p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(157px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 0.5rem;
  padding: 1rem;
}
.grid-derivation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 5px;
  padding: 5px;
}
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: 1fr;
  grid-gap: 20px;
  padding: 20px;
}
.grid-feature {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: rgba(159, 175, 251, 0.50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.5' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(72deg, rgba(92, 249, 255, 0.10) 25%, rgba(78, 202, 255, 0.10) 100%), radial-gradient(20% 80%, rgba(255, 255, 255, 0.1) 0%, rgba(160, 144, 255, 0.10) 100%);
  background-blend-mode: multiply;
  border: 1px solid #F6AB4E;
  border-radius: 1rem;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  .grid-feature {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.1' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E");
    background-color: rgba(3, 93, 87, 0.50);
  }
}
/*--------------------------------------------------*/
.grid-parts {
  text-align: left;
}
.grid-parts h3 {
  text-align: left;
}
.grid-sentence {
  text-align: justify;
}
.grid-sentence img {
  margin: auto;
}
.grid-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, 0.5);
  transform: perspective(5000px) rotateX(10deg) rotateY(-10deg) rotateZ(-1deg);
  transition: box-shadow 0.5s, transform 0.5s;
}
.grid-card img {
  width: 100%;
}
.grid-card:hover {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
  transform: perspective(5000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
@media (prefers-color-scheme: dark) {
  .grid-card {
    box-shadow: 10px 10px 20px 1px rgba(255, 255, 255, 0.5);
  }
  .grid-card:hover {
    box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.5);
  }
}
.product-img {
  width: 100%;
  height: 300px;
  text-align: center;
  background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(28, 0, 140, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(7, 0, 47, 0.60) 120%);
  background-blend-mode: multiply;
  border-radius: 1rem 1rem 0px 0px;
}
.product-img img {
  width: 280px;
  height: 280px;
  filter: drop-shadow(3px 3px 3px #231815);
}
.product-name {
  margin: 1rem auto;
  border-collapse: collapse;
}
.product-name tbody {
  display: inline-block;
  padding: 0.5rem 2rem;
  background: hsla(0, 0%, 100%, 0.20);
}
.product-name td {
  padding: 3px;
  text-align: left;
}
.product-id {
  display: block;
  list-style-type: none;
  margin: 20px !important;
}
.product-id li {
  display: block;
  margin: 0px !important;
}
li .figure_left_33 {
margin-left: 33% !important;
}
.product-id li .package-type {
  text-align: center;	
}

.feature-img {
  width: 100%;
  height: 229px;
  border-radius: 1rem 1rem 0px 0px;
  background: linear-gradient(-30deg, rgba(108, 108, 146, 1.00) 0%, rgba(75, 179, 206, 1.00) 100%);
}
@media (prefers-color-scheme: dark) {
  .feature-img {
    background: linear-gradient(-30deg, rgba(87, 107, 112, 0.5) 0%, rgba(107, 121, 124, 0.5) 100%);
  }
}
.feature-img img {
  width: 220px;
  height: 220px;
  filter: drop-shadow(1px 1px 1px #231815);
}
.feature-img-w {
  width: 100%;
  height: 229px;
  border-radius: 1rem 1rem 0px 0px;
  background: linear-gradient(-30deg, rgba(218, 214, 162, 1.00) 0%, rgba(139, 189, 202, 1.00) 100%);
}
.feature-img-w img {
  width: 220px;
  height: 220px;
}
/*--------------------------------------------------*/
.feature-purple {
  widows: 100%;
  height: 350px;
  border-radius: 1rem 1rem 0px 0px;
  background: linear-gradient(-30deg, rgba(187, 187, 222, 0.60) 0%, rgba(175, 175, 217, 0.60) 100%);
}
.feature-purple img {
  width: 350px;
  height: 350px;
  filter: drop-shadow(1px 1px 2px #4F4846);
}
.feature-green {
  widows: 100%;
  height: 344px;
  background: linear-gradient(-30deg, rgba(175, 175, 217, 0.50) 0%, rgba(95, 195, 208, 0.50) 100%);
}
.feature-white {
  display: grid;
  place-items: center;
  background: linear-gradient(-30deg, rgba(238, 247, 140, 1.00) 0%, rgba(133, 215, 232, 1.00) 100%);
}
@media (prefers-color-scheme: dark) {
  .feature-white {
    background: linear-gradient(-30deg, rgba(238, 247, 140, 0.50) 0%, rgba(133, 215, 232, 0.50) 100%);
  }
}
.feature-white img {
  width: 100%;
  margin: 10px;
}
/*--------------------------------------------------*/
.grid-footer-list {
  text-align: center;
  margin: 0px;
  border-radius: 6px;
  border-top: solid 1px #751B43;
  border-left: solid 1px #751B43;
  border-right: solid 1px #D95D94;
  border-bottom: solid 1px #D95D94;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5) inset;
}
.grid-footer-list ul {
  list-style-type: none;
  margin: 20px;
}
.grid-footer-list li {
  margin: 0px;
  text-decoration: none;
}
.grid-footer-list li a {
  display: block;
  border-top: 1px solid #2F9693;
  font-feature-settings: "palt";
  letter-spacing: 0em;
  padding: 0.5em 0px 0.5em 15px;
  text-decoration: none;
  font-size: 100%;
}
.grid-footer-list li:last-child a {
  border-bottom: 1px solid #2F9693;
}
.grid-footer-list li a:hover:not(.active) {
  color: #F2F5F5;
  box-shadow: 0 0 40px 40px #277D7B inset;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
/*--------------------------------------------------*/
.grid-photo {
  display: grid;
  place-items: center;
  height: 320px;
  border: 1px solid #EDE00F;
  border-radius: 1rem;
  background: linear-gradient(-30deg, rgba(192, 176, 146, 0.50) 0%, rgba(138, 177, 183, 0.50) 100%);
}
@media (prefers-color-scheme: dark) {
  .grid-photo {
    background: linear-gradient(-30deg, rgba(87, 107, 112, 0.5) 0%, rgba(107, 121, 124, 0.5) 100%);
  }
}
.grid-photo img {
  width: 240px;
  height: 240px;
}
/*--------------------------------------------------*/
.grid-logo a {
  display: grid;
  place-items: center;
  height: 150px;
  border: 2px solid #A1A1A1;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 10px;
  overflow: hidden;
}
.grid-logo img {
  max-width: 100%;
  height: auto;
}
.grid-logo a:hover {
  border: 2px solid #2F00FF;
  background: rgba(255, 255, 255, 1);
}
/*--------------------------------------------------*/
.grid-home {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
/*--------------------------------------------------*/
.footer-title {
  font-size: 120%;
  margin: 1rem 0rem -0.25rem 0rem;
  text-align: center;
}
.footer-item {
  display: block;
  font-size: 100%;
  text-align: left;
}
/*--------------------------------------------------*/
.numbering {
  margin: 0px 1rem 1rem 1rem;
  padding: 1rem;
  border: solid 1px #A8A8A8;
  border-radius: 1rem;
  background: rgba(232, 232, 232, 0.10);
  box-shadow: 1px 1px 10px 2px rgba(163, 163, 163, 0.50) inset;
}
.numbering ol {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  counter-reset: number;
  list-style-type: none;
}
.numbering ol li {
  margin: 0;
  position: relative;
  min-width: 13rem;
  padding-left: 30px;
  font-size: 80%;
}
.numbering ol li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  background: #9764A7;
  color: white;
  font-family: 'Avenir', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 100%;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  left: 0;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*--------------------------------------------------*/
.numbering-circle {
  counter-reset: number-c;
}
#main .numbering-circle h3 {
  position: relative;
  text-align: left;
  padding-left: 2rem;
  margin: 0 1rem;
}
#main .numbering-circle p:not notice-box {
  margin: 0 3rem;
}
.numbering-circle h3:before {
  position: absolute;
  counter-increment: number-c;
  content: counter(number-c);
  color: white;
  font-family: 'Avenir', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: -30px;
}
.color-green h3:before {
  background: #647EA7;
}
.color-purple h3:before {
  background: #9764A7;
}
.color-orange h3:before {
  background: var(--darkorange);
}
/*--------------------------------------------------*/
.ticker {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
@keyframes hscroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.ticker ul {
  display: inline-block;
  padding-left: 100%;
  animation: hscroll 20s linear infinite;
}
.ticker li {
  display: inline-block;
}
/*--------------------------------------------------*/
.measure35-h {
  position: absolute;
  top: 0px;
  display: flex;
  text-align: right;
  font-size: 70%;
}
.measure35-h > * { /* 344/X */
  width: 98.2px;
  height: 15px;
  border-right: solid 2px #888;
}
.measure35-h5 {
  position: absolute;
  top: 0px;
  left: -49.1px;
  display: flex;
}
.measure35-h5 > * { /* 344/X */
  width: 98.2px;
  height: 8px;
  border-right: solid 2px #888;
}
.measure35-v {
  position: absolute;
  top: 98.2px;
}
.measure35-v > * {
  width: 15px;
  height: 98.2px;
  border-top: solid 2px #888;
}
.measure35-v5 {
  position: absolute;
  top: 49.1px;
}
.measure35-v5 > * {
  width: 8px;
  height: 98.2px;
  border-top: solid 2px #888;
}
/*--------------------------------------------------*/
.measure45-h {
  position: absolute;
  top: 0px;
  display: flex;
  text-align: right;
  font-size: 70%;
}
.measure45-h > * { /* 344/X */
  width: 76.4px;
  height: 15px;
  border-right: solid 2px #888;
}
.measure45-h5 {
  position: absolute;
  top: 0px;
  left: -38.2px;
  display: flex;
}
.measure45-h5 > * { /* 344/X */
  width: 76.4px;
  height: 8px;
  border-right: solid 2px #888;
}
.measure45-v {
  position: absolute;
  top: 76.4px;
}
.measure45-v > * {
  width: 15px;
  height: 76.4px;
  border-top: solid 2px #888;
}
.measure45-v5 {
  position: absolute;
  top: 38.2px;
}
.measure45-v5 > * {
  width: 8px;
  height: 76.4px;
  border-top: solid 2px #888;
}
/*--------------------------------------------------*/
.facolor {
  color: #B4B3AB;
  margin-right: 10px;
  font-size: 120%;
}
.facolor1 {
  color: #0081FF;
  margin-right: 10px;
  font-size: 120%;
}
.facolor01 {
  color: rgba(151, 162, 251, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor02 {
  color: rgba(150, 151, 223, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor03 {
  color: rgba(166, 144, 200, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor04 {
  color: rgba(177, 133, 169, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor05 {
  color: rgba(202, 169, 179, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor06 {
  color: rgba(227, 209, 193, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
.facolor07 {
  color: rgba(251, 245, 206, 1.00);
  margin-right: 10px;
  font-size: 120%;
}
/*--------------------------------------------------*/
.gold-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 2000;
  perspective-origin: 50% 50%;
}
.gold-box li {
  position: absolute;
  display: block;
  list-style: none;
  background: rgba(255, 255, 255, 0.0);
  animation: gold-spin-animate 5s ease-in-out alternate infinite;
  bottom: 0px;
}
.gold-box li:nth-child(1) {
  top: 0%;
  left: calc(50% - 500px);
  width: 1000px;
  height: 1000px;
}
@keyframes gold-spin-animate {
  0% {
    transform: rotateX(45deg) rotateY(30deg) rotateZ(0deg);
    opacity: 0.1;
  }
  50% {
    opacity: 0.03;
  }
  100% {
    transform: rotateX(45deg) rotateY(-30deg) rotateZ(0deg);
    opacity: 0.1;
  }
}
/*--------------------------------------------------*/
.cue-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cue-box li {
  position: absolute;
  display: block;
  list-style: none;
  background: rgba(255, 255, 255, 0.0);
  animation: cue-spin-animate linear infinite;
  bottom: -300px;
}
.cue-box li:nth-child(1) {
  left: 40%;
  width: 250px;
  height: 250px;
  animation-delay: 0s;
  animation-duration: 30s;
}
.cue-box li:nth-child(2) {
  left: 50%;
  width: 350px;
  height: 350px;
  animation-delay: 0s;
  animation-duration: 40s;
}
.cue-box li:nth-child(3) {
  left: 60%;
  width: 300px;
  height: 300px;
  animation-delay: 0s;
  animation-duration: 60s;
}
@keyframes cue-spin-animate {
  0% {
    transform: translateX(500px) translateY(1000) rotate(180deg);
    opacity: 0.3;
  }
  50% {
    transform: translateX(-500px) translateY(-1300px) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translateX(500px) translateY(1000) rotate(0deg);
    opacity: 0.3;
  }
}
/*--------------------------------------------------*/
.aria-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.aria-box li {
  position: absolute;
  display: block;
  list-style: none;
  background: rgba(255, 255, 255, 0.0);
  animation: aria-spin-animate linear infinite;
  bottom: 0px;
}
.aria-box li:nth-child(1) {
  left: 0%;
  width: 400px;
  height: 400px;
  animation-delay: 0s;
  animation-duration: 30s;
}
.aria-box li:nth-child(2) {
  left: 50%;
  width: 500px;
  height: 500px;
  animation-delay: 0s;
  animation-duration: 40s;
}
.aria-box li:nth-child(3) {
  left: 70%;
  width: 400px;
  height: 400px;
  animation-delay: 0s;
  animation-duration: 60s;
}
@keyframes aria-spin-animate {
  0% {
    transform: translateY(-600px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translateY(-300px) rotate(180deg);
    opacity: 0.2;
  }
  50% {
    transform: translateY(300px) rotate(360deg);
    opacity: 0;
  }
  75% {
    transform: translateY(-300px) rotate(180deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(-600px) rotate(0deg);
    opacity: 0;
  }
}
/*--------------------------------------------------*/
.description-product {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 20px 20px 20px;
  padding: 5px;
  border-radius: 1rem;
  border: 1px solid #9557D9;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='30' height='30'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.5' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(72deg, rgba(255, 187, 0, 0.1) 25%, rgba(255, 80, 0, 0.1) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.1) 0%, rgba(7, 0, 47, 0.1) 120%);
  background-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .description-product {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='30' height='30'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.08' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(72deg, rgba(255, 187, 0, 0.1) 25%, rgba(255, 80, 0, 0.1) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.1) 0%, rgba(7, 0, 47, 0.1) 120%);
    background-blend-mode: multiply;
  }
}
.description-product-txt {
  width: 65%;
}
.description-product img {
  max-width: 200px;
  max-height: 200px;
  margin: 20px;
  filter: drop-shadow(2px 6px 6px #7B7B7B);
}
.description-product details {
  width: 100%;
}
.submit-btn {
  color: rgba(58, 136, 139, 1.00);
  line-height: 2;
  border: 2px solid rgba(31, 123, 169, 1.00);
  border-radius: 8px;
  background: rgba(176, 185, 207, 0.50);
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .submit-btn {
    color: rgba(235, 254, 255, 1.00);
  }
}
.submit-btn:hover {
  background: rgba(153, 254, 173, 0.50);
}
video::cue {
  font-size: 18px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}
/* photo_slider
--------------------------------------------------*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.photo_slider {
  width: 344px;
  padding-top: 344px;
  position: relative;
  margin: 2em auto;
  text-align: center;
}
.photo_slider > img {
  width: 344px;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.6s;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
  background: rgba(201, 213, 206, 0.50);
  border: 1px solid rgba(90, 110, 120, 1);
  border-radius: 6px;
}
.photo_slider figcaption {
  line-height: 0.8;
  font-size: 80%;
}
.photo_slider input[name='ps_switch'] {
  display: none;
}
.photo_slider input[name='ps_switch2'] {
  display: none;
}
.photo_slider label {
  margin: 15px 2px 0 2px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.6s ease;
  opacity: 1.0;
}
.photo_slider label img:hover {
  border: 1px solid #FF7043;
  opacity: 1.0;
  background: rgba(255, 249, 249, 0.50);
}
.photo_slider label img {
  width: 48px;
  border: 1px solid rgba(90, 110, 120, 1);
  border-radius: 3px;
  background: rgba(207, 207, 207, 0.50);
}
.photo_slider input[name='ps_switch']:checked + label img {
  border: 1px solid #FF7043;
  background: rgba(255, 249, 249, 0.50);
  opacity: 1;
}
.photo_slider input[name='ps_switch'] ~ img {
  opacity: 0;
}
.photo_slider input[name='ps_switch']:checked + label + img {
  opacity: 1;
}
.photo_slider input[name='ps_switch2']:checked + label img {
  border: 1px solid #FF7043;
  background: rgba(255, 249, 249, 0.50);
  opacity: 1;
}
.photo_slider input[name='ps_switch2'] ~ img {
  opacity: 0;
}
.photo_slider input[name='ps_switch2']:checked + label + img {
  opacity: 1;
}
/* snow
--------------------------------------------------*/
.snow {
  z-index: 530000;
  color: snow;
  font-size: 10px;
  position: fixed;
  top: -5%;
  text-shadow:
    5vw -100px 2px, 10vw -400px 3px, 20vw -500px 4px, 30vw -580px 1px, 39vw -250px 2px, 42vw -340px 5px, 56vw -150px 2px, 63vw -180px 0, 78vw -220px 4px, 86vw -320px 9px, 94vw -170px 7px;
  animation: snow-anim 10s linear infinite;
}
@keyframes snow-anim {
  100% {
    color: transparent;
    top: 150%;
  }
}
/* 404 not found
--------------------------------------------------*/
.hero-error404 {
  display: grid;
  place-items: center;
  width: 100%;
  height: 430px;
  background-color: beige;
}
.emoji-thinking {
  margin-top: 60px;
  font-size: 100px;
}
.error404 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}
@media (max-width : 768px) {
  .error404 {
    font-size: clamp(12px, 4vh, 30px);
  }
}
/* table decolation
--------------------------------------------------*/
.rf-table {
  width: calc(100% - 40px);
  margin: 20px auto;
  box-sizing: border-box;
  border-collapse: collapse;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}
.rf-table th {
  font-size: 95%;
  padding: 10px 0px;
  color: rgba(0, 71, 136, 1.00);
  text-align: center;
  border: 1px solid #C2C2FF;
}
.rf-table td {
  font-size: 80%;
  font-family: 'Raleway';
  color: rgba(236, 246, 255, 1.00);
  text-align: left;
  padding: 20px;
}
/* table decolation
--------------------------------------------------*/
.derivation {
  min-width: 300px;
  border-collapse: collapse;
  border-radius: 8px;
  background:
    linear-gradient(30deg, rgba(114, 0, 168, 0.90), rgba(0, 0, 0, 0) 75%), linear-gradient(220deg, rgba(233, 173, 41, 0.90), rgba(255, 0, 0, 0) 75%), linear-gradient(130deg, rgba(255, 0, 0, 0.90), rgba(0, 255, 0, 0) 75%), linear-gradient(330deg, rgba(9, 0, 198, 0.90), rgba(0, 0, 255, 0) 75%);
  text-align: center
}
.derivation td span {
  display: block;
  font-size: 50%;
  color: #E1E1E1;
}
.derivation td {
  font-size: 70%;
  color: azure;
  line-height: 1.0;
  padding-bottom: 15px;
}
.derivation td .name {
  font-size: 150%;
  font-family: 'Raleway';
  color: azure;
  line-height: 0.9;
}
.derivation td img {
  margin: 10px;
  width: 100px;
  height: auto;
  filter: drop-shadow(3px 3px 3px #231815);
}
.derivation td a img:hover {
  filter: brightness(1.5);
}
.grayed-out:not(:hover) {
  filter: grayscale(100%) brightness(1.5) contrast(20%);
}
.derivation figcaption {
  line-height: 0.8;
}
/* overlay
--------------------------------------------------*/
.overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 1.0) 100%);
}
/* ribbon
--------------------------------------------------*/
.video-wrapper {
  position: relative;
  width: 100%;
  padding: 56.25% 0 0 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.starter-img {
  margin: 20px;
  margin-bottom: 0;
  border-radius: 6px;
  border: 1px solid #E29E4A;
  background: linear-gradient(-30deg, rgba(108, 108, 146, 1.00) 0%, rgba(75, 179, 206, 1.00) 100%);
}
@media (prefers-color-scheme: dark) {
  .starter-img {
    background: linear-gradient(-30deg, rgba(108, 108, 146, 0.5) 0%, rgba(75, 179, 206, 0.5) 100%);
  }
}
.starter-img img {
  filter: drop-shadow(1px 1px 1px #231815);
}
.image-backgound {
  position: relative;
  display: inline-block;
  padding: 20px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 1rem;
  border: 1px solid #A1A1A1;
}
.figure-base {
  background-color: rgba(206, 210, 253, 0.30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.5' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(72deg, rgba(92, 249, 255, 0.10) 25%, rgba(78, 202, 255, 0.10) 100%), radial-gradient(20% 80%, rgba(255, 255, 255, 0.1) 0%, rgba(160, 144, 255, 0.10) 100%);
  background-blend-mode: multiply;
  border: 1px solid #E29E4A;
  border-radius: 1rem;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.figure-base img {
  margin: 20px;
  max-width: 280px;
}
@media (prefers-color-scheme: dark) {
  .figure-base {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 65 60' width='20' height='20'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.1' d='M59.8,45.1a7.8,7.8,0,0,1,4.1-6.9V32.6a7.9,7.9,0,0,1,0-13.8v-4c0-4-3.9-7.7-8-7.7H52.3a7.8,7.8,0,0,1-13.9,0H32.9a7.8,7.8,0,0,1-13.9,0h-4a8,8,0,0,0-8,8v3.6a7.8,7.8,0,0,1,0,14v5.4a7.8,7.8,0,0,1,0,14v3.6a8,8,0,0,0,8,8h4a7.8,7.8,0,0,1,13.9,0h5.5a7.8,7.8,0,0,1,13.9,0h3.5c4.1,0,8-3.7,8-7.7V52A7.9,7.9,0,0,1,59.8,45.1Zm-37,11.6a8.3,8.3,0,1,1,8.3-8.3A8.3,8.3,0,0,1,22.7,56.7Zm19.6-4.3L35.6,51A12.8,12.8,0,0,0,19.9,35.9l-1.8-6.7A19.7,19.7,0,0,1,42.4,52.5Zm12.4,3.1L48,53.8a24.7,24.7,0,0,0-5.4-22.4,26,26,0,0,0-26-8.1L15,16.6a33.2,33.2,0,0,1,17.9.5,32.8,32.8,0,0,1,14.9,9.7A31.6,31.6,0,0,1,54.7,55.5Z'%3E%3C/path%3E%3C/svg%3E");
  }
}
.img-drop-shadow {
  filter: drop-shadow(5px 5px 10px #231815);
}
.multi-rows-svg {
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  margin: 20px;
}
.multi-rows-svg img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid #DC9E31;
  background: linear-gradient(-30deg, rgba(213, 166, 79, 0.50) 0%, rgba(98, 177, 190, 0.50) 100%);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  padding: 20px;
}
@media (prefers-color-scheme: dark) {
  .multi-rows-svg img {
    background: linear-gradient(-30deg, rgba(255, 201, 100, 0.50) 0%, rgba(194, 246, 255, 0.50) 100%);
  }
}
.multi-rows-photo {
  position: relative;
  display: inline-block;
  border-radius: 1rem;
  margin: 20px;
}
.multi-rows-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid #DC9E31;
  background: linear-gradient(-30deg, rgba(192, 176, 146, 0.50) 0%, rgba(138, 177, 183, 0.50) 100%);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  .multi-rows-photo img {
    background: linear-gradient(-30deg, rgba(132, 154, 160, 0.70) 0%, rgba(144, 157, 159, 0.70) 100%);
  }
}
.multi-rows-caption {
  margin: 1em;
  line-height: 1;
  color: rgba(178, 84, 247, 1.00);
  font-family: 'Avenir', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 100%;
}
.multi-rows-caption2 {
  position: absolute;
  color: #240C45;
  left: 0;
  right: 0;
  bottom: 17px;
}
.fugure-caption-left {
  position: absolute;
  color: #6A23CF;
  left: 20px;
  bottom: 17px;
}
/* curled image
--------------------------------------------------*/
.curled-container {
  position: relative;
  z-index: 1;
  width: 750px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 30px;
}
.curled-container img {
  width: 100%;
  height: auto;
}
.curled-container:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
}
.curled-shadow {
  position: relative;
  float: center;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.curled-shadow:before, .curled-shadow:after {
  content: "";
  position: absolute;
  z-index: -2;
}
/* Lifted corners */
.lifted {}
.lifted:before, .lifted:after {
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}
.lifted:after {
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}
/* ribbon
--------------------------------------------------*/
.ribbon {
  width: 110px;
  height: 110px;
  overflow: hidden;
  position: absolute;
  top: -2px;
  right: -2px;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 200px;
  background-color: #FC0000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  color: #ECECEC;
  font-size: 120%;
  text-align: center;
  left: -25px;
  top: 20px;
  transform: rotate(45deg);
  border: 2px dotted #BDBDBD;
}
/* form-table
--------------------------------------------------*/
.form-table {
  margin: 20px auto;
  border-collapse: collapse;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  font-size: 100%;
}
.form-table th {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(228, 228, 226, 0.5);
  border: 1px solid #BBC6D3;
}
.form-table td {
  font-size: 120%;
  padding: 10px;
  text-align: right;
  vertical-align: middle;
  background-color: rgba(246, 246, 246, 0.5);
  border: 1px solid #BBC6D3;
}
@media (prefers-color-scheme: dark) {
  .form-table th {
    background-color: rgba(151, 151, 151, 0.50);
  }
  .form-table td {
    background-color: rgba(129, 129, 129, 0.20);
  }
}
/* grid-table
--------------------------------------------------*/
.grid-table {
  border-collapse: collapse;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  font-size: 80%;
  border-radius: 8px;
}
.grid-table th {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(228, 228, 226, 0.5);
  border: 1px solid #DC9E31;
}
.grid-table td {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  background-color: rgba(246, 246, 246, 0.5);
  border: 1px solid #DC9E31;
}
@media (prefers-color-scheme: dark) {
  .grid-table th {
    background-color: rgba(151, 151, 151, 0.50);
  }
  .grid-table td {
    background-color: rgba(129, 129, 129, 0.20);
  }
}
/* std-table
--------------------------------------------------*/
.std-table {
  margin: 20px auto;
  border-collapse: collapse;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  font-size: 80%;
}
.std-table th {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(228, 228, 226, 0.5);
  border: 1px solid #BBC6D3;
}
.std-table td {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  background-color: rgba(246, 246, 246, 0.5);
  border: 1px solid #BBC6D3;
}
@media (prefers-color-scheme: dark) {
  .std-table th {
    background-color: rgba(151, 151, 151, 0.50);
  }
  .std-table td {
    background-color: rgba(129, 129, 129, 0.20);
  }
}
/* resp-table
--------------------------------------------------*/
.resp-table {
  border-collapse: collapse;
  vertical-align: middle;
  margin: 20px auto;
}
.resp-table tr {
  background: rgba(255, 255, 255, 0.1);
}
.resp-table th, .resp-table td {
  border: 1px solid #D0D8E1;
  padding: 10px;
}
.resp-table th {
  background: rgba(255, 255, 255, 0.2);
}
.resp-table label {
  line-height: 34px;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .resp-table thead {
    display: none;
  }
  .resp-table tr, .resp-table td {
    display: block;
  }
  .resp-table tr {
    border: 1px solid #dbe1e8;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .resp-table td {
    border: none;
    border-bottom: 1px solid #dbe1e8;
    display: flex;
    justify-content: space-between;
    text-align: right;
  }
  .resp-table td:last-child {
    border-bottom: none;
  }
  .resp-table td::before {
    content: attr(aria-label);
    display: inline-block;
    font-weight: bold;
    float: left;
    text-align: left;
    padding-left: 5px;
    padding-right: 10px;
    white-space: nowrap;
  }
}
/* heading
--------------------------------------------------*/
#main h1 {
  height: 60px;
  text-align: center;
  position: relative;
  background: linear-gradient(90deg, #433748, #251E28, #433748);
  margin-top: 2px;
  margin-bottom: 2px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 8px;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-size: 120%;
  color: white;
  line-height: 1.2;
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.5));
}
#main h1 span {
  display: block;
  font-size: 65%;
  color: #E1E1E1;
}
#main h1::before {
  position: absolute;
  content: attr(title)"";
  top: 4px;
  font-size: 65%;
  color: #E1E1E1;
}
#main h2 {
  text-align: center;
  background-color: rgba(241, 204, 220, 0.50);
  border-top: solid 1px #FFF9FB;
  border-bottom: double 6px #803958;
  margin-bottom: 2px;
  padding-top: 15px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  font-size: 120%;
  color: #803958;
  line-height: 1.2;
  /*filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));*/
}
@media (prefers-color-scheme: dark) {
  #main h2 {
    margin-top: 15px;
    background: rgba(133, 76, 101, 0.5);
    border-top: solid 1px #ECDEE4;
    border-bottom: double 6px #ECDEE4;
    color: #ECDEE4;
  }
}
#main h3 {
  text-align: center;
  color: rgba(90, 110, 120, 1);
  font-size: 120%;
  padding: 8px 10px;
  margin: 10px;
  border-top: double 6px rgba(90, 110, 120, 1);
  border-bottom: solid 0px rgba(90, 110, 120, 1);
}
@media (prefers-color-scheme: dark) {
  #main h3 {
    color: #C79DAF;
    border-top: double 6px #C79DAF;
    border-bottom: solid 0px #C79DAF;
  }
}
#main h4 {
  text-align: center;
  color: #854C65;
  font-size: 100%;
  padding: 6px 10px;
  margin: 15px;
  border-top: solid 1px #854C65;
  border-bottom: solid 2px #854C65;
}
@media (prefers-color-scheme: dark) {
  #main h4 {
    color: #C79DAF;
    border-top: solid 1px #ECDEE4;
    border-bottom: solid 2px #ECDEE4;
  }
}
#main summary {
  cursor: pointer;
  outline: none;
  position: relative;
}
#main summary:visited {
  background: #D6D9F9;
}
#main summary:hover {
  background: rgba(225, 245, 244, 0.5);
  color: #383838;
}
#main details {
  transition: 0.0s;
}
#main summary::after {
  font-size: 1.15rem;
  line-height: 1;
  content: "+";
  position: absolute;
  right: 20px;
  border: 2px solid;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: #FFFDE5;
  transition: all 0.3s ease;
}
#main details[open] > summary::after {
  font-size: 1.3rem;
  line-height: 0.9;
  content: "-";
  position: absolute;
  right: 20px;
  transition: all 0.3s ease;
}
.summary-h2 {
  text-align: center;
  background-color: rgba(241, 204, 220, 0.50);
  border-top: solid 1px #FFF9FB;
  border-bottom: double 6px #803958;
  padding: 15px 0px 15px 0px;
  font-size: 120%;
  color: #803958;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
@media (prefers-color-scheme: dark) {
  .summary-h2 {
    background: rgba(133, 76, 101, 0.5);
    border-top: solid 1px #ECDEE4;
    border-bottom: double 6px #ECDEE4;
    color: #ECDEE4;
  }
}
.summary-h3 {
  text-align: center;
  color: rgba(90, 110, 120, 1);
  font-size: 110%;
  padding: 8px 0px 8px 0px;
  margin: 10px;
  border-top: solid 1px rgba(255, 255, 255, 0.60);
  border-bottom: solid 2px rgba(90, 110, 120, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media (prefers-color-scheme: dark) {
  .summary-h3 {
    background-color: rgba(153, 195, 178, 0.50);
    color: #ECDEE4;
    border-top: solid 1px #ECDEE4;
    border-bottom: solid 2px #ECDEE4;
  }
}
.summary-h4 {
  text-align: center;
  color: #854C65;
  font-size: 100%;
  padding: 6px 0px 6px 0px;
  margin: 0px 20px 20px 20px;
  border-top: solid 1px #854C65;
  border-bottom: solid 2px #854C65;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (prefers-color-scheme: dark) {
  .summary-h4 {
    color: #ECDEE4;
    border-top: solid 1px #ECDEE4;
    border-bottom: solid 2px #ECDEE4;
  }
}
.summary-h4-left {
  text-align: left;
  color: #854C65;
  font-size: 100%;
  padding: 11px 6px 6px 6px;
  margin: 0px 20px 20px 20px;
  border-top: solid 1px #854C65;
  border-bottom: solid 2px #854C65;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (prefers-color-scheme: dark) {
  .summary-h4-left {
    color: #ECDEE4;
    border-top: solid 1px #ECDEE4;
    border-bottom: solid 2px #ECDEE4;
  }
}
.summary-netshop {
  color: #854C65;
  font-size: 150%;
  padding: 10px 0px;
  margin: 0px 0px 20px 0px;
  border-top: solid 1px #854C65;
  border-bottom: solid 2px #854C65;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (prefers-color-scheme: dark) {
  .summary-netshop {
    color: #ECDEE4;
    border-top: solid 1px #ECDEE4;
    border-bottom: solid 2px #ECDEE4;
  }
}
.list-netshop ul {
  margin: -20px 20px 20px 20px;
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.list-netshop ul li {
  color: #F2F5F5;
  border-bottom: 2px solid rgba(191, 191, 191, 0.50);
  display: block;
  list-style-type: none;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.list-netshop ul li:last-of-type {
  border-bottom: none;
}
.list-netshop ul li a {
  display: block;
  font-size: 120%;
  font-family: 'Raleway';
  text-decoration: none;
  font-feature-settings: "palt";
  letter-spacing: 0em;
  padding-top: 20px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 20px;
  width: 100%;
  margin-top: -20px;
}
.list-netshop ul li a:hover {
  color: #F2F5F5;
  box-shadow: 0 0 40px 40px #277D7B inset;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
/* background color
--------------------------------------------------*/
.bg-gold {
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FEDB37 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.color-app {
  background: rgba(255, 249, 253, 0.5);
  color: rgba(109, 0, 97, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-app {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-tag {
  background: rgba(249, 249, 255, 0.5);
  color: rgba(35, 0, 87, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-tag {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-io {
  background: rgba(255, 249, 242, 0.5);
  color: rgba(194, 89, 0, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-io {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-uart {
  background: rgba(242, 255, 242, 0.5);
  color: rgba(0, 143, 16, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-uart {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-pal {
  background: rgba(247, 229, 230, 0.5);
  color: #D46570;
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-pal {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-rc {
  background: rgba(255, 254, 248, 0.5);
  color: rgba(135, 121, 0, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-rc {
    background: #383838;
    color: #FFFFFF;
  }
}
.color-audio {
  background: rgba(250, 242, 255, 0.5);
  color: rgba(86, 0, 143, 1.00);
  padding-bottom: 5px;
}
@media (prefers-color-scheme: dark) {
  .color-audio {
    background: #383838;
    color: #FFFFFF;
  }
}
/* notice-box
--------------------------------------------------*/
.notice-box {
  color: var(--color-notice-box);
  border: 1px solid var(--color-notice-box);
  border-left: 2.5rem solid var(--color-notice-box);
  border-right: 1rem solid var(--color-notice-box);
  position: relative;
  margin: 1rem;
  font-size: 0.9rem;
  border-radius: 1rem;
  box-shadow: 1px 1px 3px 2px rgba(117, 117, 117, 0.50) inset;
}
ol > .notice-box {
  margin: 1rem 0;
}
ol > .block_cli {
  margin: 1rem 0;
}
.notice-box::before {
  --font-size: 1.5rem;
  position: absolute;
  top: calc(((100% - var(--font-size)) / 2) - 0.2rem);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: var(--font-size);
}
.info-notice.notice-box {
  --color-notice-box: #37778A;
  background: rgba(249, 254, 255, 0.50);
}
.info-notice.notice-box::before {
  content: "\f05a";
  color: #F9FEFF;
  left: -2rem;
}
.warning-notice.notice-box {
  --color-notice-box: #B47B16;
  background: rgba(253, 253, 240, 0.50);
}
.warning-notice.notice-box::before {
  content: "\f071";
  color: #FBFBF1;
  left: -2.05rem;
}
.hint-notice.notice-box {
  --color-notice-box: #7032D0;
  background: rgba(250, 248, 253, 0.50);
}
.hint-notice.notice-box::before {
  content: "\f0eb";
  color: #FAF8FD;
  left: -1.75rem;
}
@media (prefers-color-scheme: dark) {
  .info-notice.notice-box, .warning-notice.notice-box, .hint-notice.notice-box {
    background: rgba(0, 0, 0, 0.2);
    color: #F9FEFF;
  }
}
/* warning_notice
--------------------------------------------------*/
.warning_notice {
  display: flex;
  margin: 20px;
}
.warning-icon {
  background: #B47B16;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 160%;
  color: #FBFBF1;
  width: 60px;
  padding-left: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.warning-text {
  border: 1px solid #B47B16;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(253, 253, 240, 0.50);
  padding: 15px 20px;
  font-size: 90%;
  color: #B47B16;
  flex: 1;
  box-shadow: 1px 1px 3px 2px rgba(117, 117, 117, 0.50) inset;
}
@media (prefers-color-scheme: dark) {
  .warning-text {
    background: rgba(0, 0, 0, 0.2);
    color: #FBFBF1;
  }
}
/* info_notice
--------------------------------------------------*/
.info_notice {
  display: flex;
  margin: 20px;
}
.info-icon {
  background: #37778A;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 160%;
  color: #F9FEFF;
  width: 60px;
  padding-left: 3px;
  padding-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-text {
  border: 1px solid #37778A;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(249, 254, 255, 0.50);
  padding: 15px 20px;
  font-size: 90%;
  color: #37778A;
  flex: 1;
  box-shadow: 1px 1px 3px 2px rgba(117, 117, 117, 0.50) inset;
}
@media (prefers-color-scheme: dark) {
  .info-text {
    background: rgba(0, 0, 0, 0.2);
    color: #F9FEFF;
  }
}
.info-text a:hover {
  color: #F08B00;
}
/* block_notice
--------------------------------------------------*/
.block_notice {
  border: 1px dashed #3a614f;
  /*	background-color: whitesmoke;*/
  border-radius: 6px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 75%;
  line-height: 1.8em;
  color: #666;
  padding: 15px 20px;
  overflow: hidden;
}
.block_notice img {
  vertical-align: middle;
}
.block_cli {
  border: 1px solid var(--color-orange);
  background-color: #000000;
  border-radius: 0.5rem;
  margin: 1rem;
  font-size: 1.05rem;
  font-family: "Courier New", Consolas, monospace;
  line-height: 1.2;
  color: #67EC70;
  padding: 1rem;
  overflow-x: scroll;
  overflow-y: visible;
}
/*  (_)-(_)
     (o o)  guidepost
==ooO=(_)=Ooo===================================*/
.guidepost {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  background: rgba(152, 152, 152, 0.80);
  margin-top: 1rem;
}
.guidepost-previous {
  flex-basis: 50%;
  border: 1px solid #2F9693;
  margin: 20px;
  text-align: left;
  border-radius: 1rem;
}
.guidepost-next {
  flex-basis: 50%;
  border: 1px solid #2F9693;
  margin: 20px;
  text-align: right;
  border-radius: 1rem;
}
.guidepost-previous a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  text-decoration: none;
  color: #216D6B;
  padding: 10px;
  display: block;
  background: rgba(252, 252, 252, 0.90);
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, .2);
  border-radius: 1rem;
}
.guidepost-next a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  text-decoration: none;
  color: #216D6B;
  padding: 10px;
  display: block;
  background: rgba(252, 252, 252, 0.90);
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, .2);
  border-radius: 1rem;
}
.guidepost-previous a::after {
  content: '前';
  float: right;
  padding-left: 5px;
  padding-right: 10px;
}
.guidepost-previous a::before {
  content: '\276e';
  float: left;
  padding-left: 10px;
  padding-right: 15px;
  transition: all 500ms ease-in-out;
}
.guidepost-next a::after {
  content: '\276f';
  float: right;
  padding-left: 15px;
  padding-right: 10px;
  transition: all 500ms ease-in-out;
}
.guidepost-next a::before {
  content: '次';
  float: left;
  padding-left: 10px;
  padding-right: 5px;
}
.guidepost-previous:hover {
  background: #E1F5F4;
}
.guidepost-next:hover {
  background: #E1F5F4;
}
.guidepost-next:hover a::after {
  padding-right: 0px;
  transition: all 500ms ease-in-out;
}
.guidepost-previous:hover a::before {
  padding-left: 0px;
  transition: all 500ms ease-in-out;
}
/*  (_)-(_)
     (o o)  Physical Style
==ooO=(_)=Ooo===================================*/
/* figure-position */
#content .figure_right {
  float: right;
  display: inline;
  margin-left: 10px;
  margin-bottom: 2px;
}
#content .figure_center {
  display: flex;
  justify-content: center;
}
#content .figure_left {
  float: left;
  display: inline;
  margin: 0 10px 2px 0;
}
#content .figure_right span.caption, #content .figure_center span.caption {
  display: block;
  /*width:180px; */
  text-align: center;
  font-size: 85.7%;
}
#content .figure_right img {
  display: block;
}
/* font-style */
.font_underline {
  text-decoration: underline;
}
.font_marker {
  background-color: #751B43;
  color: #F5F5F5;
}
.font_bold {
  font-weight: bold;
}
.font_light {
  font-weight: normal;
}
.font_color_01 {
  color: #F61C00;
}
.font_color_02 {
  color: #E6E6E6;
}
.font_color_orange {
  color: #FAC55B;
}
.font_small {
  font-size: 84%;
}
.font_small_c02 {
  color: #E6E6E6;
  font-size: 84%;
}
.font_large {
  font-size: 117%;
}
.font_big {
  font-size: 120%;
}
/*.font_big{color:#888888;font-size:110%;text-shadow: 0 0px white;font-weight: bold;}*/
.font_magenta {
  color: #FF0080;
  font-size: 120%;
  font-weight: bold;
}
/* text-align */
#content p.alignLeft, #content th.alignLeft, #content td.alignLeft {
  text-align: left;
}
#content p.alignRight, #content th.alignRight, #content td.alignRight {
  text-align: right;
}
#content p.alignCenter, #content th.alignCenter, #content td.alignCenter {
  text-align: center;
}
#content th.alignTop, #content td.alignTop {
  vertical-align: top;
}
#content th.alignMiddle, #content td.alignMiddle {
  vertical-align: middle;
}
#content th.alignBottom, #content td.alignBottom {
  vertical-align: bottom;
}
/* .bx-wrapper
------------------------------------------------*/
.bx-wrapper {
  border: none !important;
  background-color: transparent !important;
}
/* Block
------------------------------------------------*/
blockquote {
  margin: 1.3em 0 1.3em 40px;
  padding: 0;
}
/* Inline
------------------------------------------------*/
code, kbd, samp, var {
  font-family: monospace;
}
/*   -*~*-
     (o o)  Presentation Module
==ooO=(_)=Ooo===================================*/
hr {
  display: block;
}
sub, sup {
  /* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
  font-size: 35%;
  /* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
  line-height: 0;
  /* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
  position: relative;
  /* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
  vertical-align: baseline;
}
sup {
  /* Move the superscripted text up */
  top: -0.5em;
}
sub {
  /* Move the subscripted text down, but only
half as far down as the superscript moved up */
  bottom: -0.25em;
}
/*o' \,=./ `o
     (o o)  Tables Module
==ooO=(_)=Ooo===================================*/
caption {
  text-align: left;
}
/*   o,*,(o o)
    8(o o)(_)Ooo  Ruby Annotation Module (for Firefox)
==ooO=(_)=Ooo===================================*/
ruby, x:-moz-any-link {
  display: inline-table;
  text-align: center;
  white-space: nowrap;
  text-indent: 0;
  margin: 0;
  vertical-align: -25%;
  line-height: 1;
}
ruby a, x:-moz-any-link {
  display: inline-table;
  text-align: center;
  white-space: nowrap;
  text-indent: 0;
  margin: 0;
  vertical-align: -25%;
  line-height: 1;
}
ruby > rb, x:-moz-any-link {
  display: table-row-group;
  line-height: 1.2;
}
ruby a > rt, x:-moz-any-link {
  display: table-header-group;
  font-size: 72%;
  line-height: 1.2;
  letter-spacing: 0;
}
rp, x:-moz-any-link {
  display: none;
}
rt {
  position: relative;
  top: 0.3em;
  transform: translateY(0.3em);
}
html, html * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-strict;
  font-weight: normal;
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin-top: 0;
}
img {
  max-width: 100%;
  height: auto;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  min-height: 100vh;
  /*	font-family: "ヒラギノ角ゴシック W2", "ヒラギノ角ゴPro W3", "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;*/
  /*font-feature-settings : "pkna";*/
  /*font-feature-settings : "palt";
	letter-spacing: .08em;*/
  -webkit-font-smoothing: antialiased;
  /*background-color: #F7F2F9; *spring*/
  /*background-color: #E5ECEF; /*summer*/
  /*background-color: #FFF7ED; /*autumn*/
  color: #373737;
  /*text-align: justify;*/
  font-size: 100%;
  font-kerning: auto;
  line-height: 1.8em;
  -webkit-text-size-adjust: 100%;
  background: rgba(88, 83, 88, 1.00);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 780' width='600' height='600'><path fill='%23e6daf1' fill-opacity='0.05' d='m690,141.32v-46.32c0-52.47-42.53-95-95-95h-46.32c-16.04,29.77-47.5,50-83.68,50-36.19,0-67.64-20.23-83.68-50h-72.63c-16.04,29.77-47.5,50-83.68,50-36.18,0-67.64-20.23-83.68-50h-46.32C42.53,0,0,42.53,0,95v46.32c29.77,16.04,50,47.5,50,83.68S29.77,292.64,0,308.68v72.63c29.77,16.04,50,47.5,50,83.68,0,36.19-20.23,67.64-50,83.68v46.32c0,52.47,42.53,95,95,95h46.32c16.04-29.77,47.5-50,83.68-50,36.19,0,67.64,20.23,83.68,50h72.63c16.04-29.77,47.5-50,83.68-50,36.18,0,67.64,20.23,83.68,50h46.32c52.47,0,95-42.53,95-95v-46.32c-29.77-16.04-50-47.5-50-83.68,0-36.18,20.23-67.64,50-83.68v-72.63c-29.77-16.04-50-47.5-50-83.68,0-36.19,20.23-67.64,50-83.68Zm-221.17,71.02l-17.35,17.66c-6.58-6.28-13.06-11.96-21.11-18.52-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.56,5.47,7.85,6.39,14.16,11.92,20.56,18.03l-13.36,13.59c-6.05-5.77-12.05-11.02-19.51-17.1-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.57,5.47,7.26,5.91,13.09,11.01,18.96,16.6l-17.42,17.73c-18.35-17.14-38.46-31.82-59.86-43.91l42.89-72.34c27.45,15.62,52.96,34.47,75.97,56.19Zm-153.92-90.13c24.78,7.77,48.6,17.9,71.17,30.17l-25.94,43.74c-1.08-.54-2.1-1.01-3.1-1.47-1.25-.57-2.55-1.17-3.98-1.91-1.91-.98-4.24-.22-5.22,1.69-.98,1.91-.22,4.25,1.68,5.23,1.59.82,2.96,1.45,4.29,2.06.79.36,1.56.72,2.35,1.1l-13,21.93c-10.13-5.39-20.53-10.21-31.16-14.45l9.35-24.45c.77-2-.23-4.25-2.23-5.02-2-.77-4.24.23-5.01,2.24l-9.35,24.44c-10.67-3.95-21.56-7.31-32.62-10.08l19.26-81.8c7.88,1.96,15.72,4.14,23.49,6.58Zm-82.51-16.62c17.29,1.63,34.48,4.38,51.47,8.25l-19.26,81.8c-12.79-2.87-25.79-4.95-38.92-6.21l6.71-83.84Zm50.28,171.68l-32.57,77.68c-8.57-3.21-17.4-5.66-26.39-7.33l5.84-25.02c.49-2.09-.81-4.18-2.89-4.67-2.09-.49-4.17.81-4.66,2.9l-5.96,25.55c-8.79-1.18-17.69-1.61-26.62-1.27l-2.87-26.22c-.23-2.13-2.14-3.67-4.27-3.44-2.13.23-3.66,2.15-3.43,4.29l2.83,25.89c-8.5.76-16.99,2.21-25.39,4.43l-21.41-81.52c23.6-6.22,47.69-8.64,71.46-7.52l-1.87,27.25c-.15,2.14,1.47,4,3.6,4.14.09,0,.18,0,.27,0,2.02,0,3.72-1.57,3.86-3.62l1.87-27.29c23.53,1.87,46.66,7.21,68.59,15.76ZM135.25,108.25l4.14,28.96c.28,1.94,1.93,3.33,3.83,3.33.18,0,.37-.01.56-.04,2.12-.31,3.59-2.27,3.29-4.4l-4.14-28.93c12.42-1.62,24.88-2.65,37.36-3.1l.91,27.93c.07,2.1,1.79,3.76,3.87,3.76.04,0,.09,0,.13,0,2.14-.07,3.82-1.87,3.75-4.01l-.91-27.88c12.23-.21,24.45.15,36.64,1.06l-6.71,83.85c-14.95-1.06-30.06-1.07-45.22.01l-2.33-29.33c-.17-2.14-2.02-3.74-4.17-3.57-2.13.17-3.72,2.04-3.56,4.18l2.33,29.37c-15.77,1.52-31.57,4.21-47.28,8.13l-20.24-81.84c12.5-3.11,25.1-5.6,37.76-7.5Zm54.75,491.75c-55.23,0-100-44.77-100-100,0-55.23,44.77-100,100-100,55.23,0,100,44.77,100,100,0,55.23-44.77,100-100,100Zm67.3-242.16l32.55-77.64c31.86,13.62,60.94,34.14,84.69,60.77l-65.22,53.4c-14.84-15.83-32.62-28.16-52.01-36.54Zm75.77,69.89l22.46-11.64c1.9-.99,2.65-3.33,1.66-5.24-.98-1.91-3.32-2.65-5.22-1.67l-22.69,11.76c-4.23-7.14-9.05-13.98-14.45-20.4-.11-.13-.22-.25-.33-.37l65.11-53.31c16.19,19.42,29.02,41.21,38.24,64.37l-28.81,10.31c-2.02.72-3.07,2.94-2.35,4.97.57,1.59,2.06,2.58,3.65,2.58.43,0,.87-.07,1.3-.23l28.96-10.36c3.76,10.39,6.81,21.03,9.11,31.83l-82.99,13.62c-3.03-12.56-7.61-24.74-13.65-36.22Zm96.32,124.66v.08s-81.98-18.36-81.98-18.36c4.63-20.73,4.82-42.04.95-62.55l82.85-13.6c5.58,31,5.15,63.15-1.81,94.43Zm32.31-216.98c-8.5-13.69-18.14-26.8-28.9-39.18-5.58-6.42-11.38-12.57-17.38-18.45l59-60.05c7.54,7.4,14.8,15.1,21.75,23.12,7.42,8.53,14.4,17.34,20.98,26.38l-20.59,14.39c-1.17.71-1.99,1.85-2.25,3.15-.27,1.31.05,2.68.84,3.72l13.58,18.56-47.02,28.38Zm4.01,6.65l72.04-43.47c16.06,27.27,28.63,56.24,37.54,86.21l-24.53,7.47c-2.49-8.83-4.72-16.26-8.04-25.06-.76-2.01-2.99-3.02-4.99-2.26-2,.76-3.01,3-2.25,5.01,3.23,8.57,5.42,15.87,7.87,24.58l-17.99,5.48c-2.35-7.94-4.98-15.85-7.9-23.58-.76-2.01-3-3.02-5-2.26-2,.76-3.01,3-2.25,5.01,2.86,7.57,5.44,15.32,7.74,23.09l-23.07,7.03c-6.91-23.37-16.67-45.96-29.14-67.25Zm54.32,67.7c2.27,8.41,4.23,16.97,5.82,25.52.35,1.87,1.98,3.17,3.81,3.17.24,0,.47-.02.72-.07,2.1-.39,3.49-2.42,3.1-4.53-1.64-8.82-3.68-17.67-6.02-26.35l49.97-15.22c8.74,31.71,13.41,64.48,13.82,97.49l-25.19.18c-.17-9.73-.7-19.52-1.62-29.14-.21-2.14-2.11-3.7-4.23-3.49-2.13.21-3.69,2.11-3.48,4.24.9,9.4,1.42,18.96,1.59,28.45l-51.12.37c-.35-24.89-3.8-49.61-10.23-73.58l23.07-7.03Zm59.28,179.89h-.08l-23.61-6.09c2.19-8.93,4.07-18.05,5.57-27.13.35-2.12-1.08-4.12-3.19-4.47-2.11-.35-4.11,1.08-4.46,3.2-1.47,8.86-3.3,17.75-5.43,26.47l-50.25-12.97c5.97-23.29,9.04-46.95,9.32-70.5l24.25-.18c-.04,7.93-.35,15.92-.95,23.79-.16,2.14,1.44,4.01,3.57,4.17.1,0,.2.01.3.01,2.01,0,3.71-1.55,3.86-3.59.61-8.08.93-16.29.97-24.43l52.08-.38c-.24,30.76-4.17,61.69-11.96,92.12Z'></path><path fill='%23e6daf1' fill-opacity='0.05' d='m408.19,503.7h-.03l-29.1.23c-2.14.02-3.86,1.77-3.85,3.92.02,2.14,1.75,3.86,3.87,3.86h.03l29.1-.23c2.14-.02,3.86-1.77,3.85-3.92-.02-2.14-1.75-3.86-3.87-3.86Z'></path><path fill='%23e6daf1' fill-opacity='0.05' d='m320.24,324.34c-1.77-1.21-4.18-.75-5.39,1.02l-17.24,25.37c-1.21,1.77-.75,4.19,1.02,5.4.67.46,1.43.68,2.18.68,1.24,0,2.46-.59,3.21-1.7l17.24-25.36c1.21-1.77.75-4.19-1.02-5.4Z'></path><path fill='%23e6daf1' fill-opacity='0.05' d='m322.97,169.62c.44.16.88.23,1.32.23,1.58,0,3.07-.98,3.64-2.56l6-16.57c.73-2.02-.31-4.25-2.32-4.98-2.01-.73-4.24.31-4.97,2.33l-6,16.57c-.73,2.02.31,4.25,2.32,4.98Z'></path></svg>");
}
/*
@media (prefers-color-scheme: dark) {
  body {
    background:
      linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
  }
}
*/
a {
  color: #1E615F;
}
@media (prefers-color-scheme: dark) {
  a {
    color: #3BBFBB;
  }
}
a:hover {
  color: #E78600;
}
a:active {
  color: #FFBA5A;
}
#toc {
  background: #ffffff;
  border: 1px solid #3a614f;
  border-radius: 6px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 90%;
  line-height: 1.8em;
  color: #666;
}
#toc p {
  text-align: center;
  font-size: 110%;
}
.balloon {
  position: relative;
  margin: 20px;
  margin-left: 110px;
  padding: 8px 15px;
  background: rgba(210, 228, 255, 0.5);
  border-radius: 70px;
  border: 0px solid #A1A1A1;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.balloon:before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -45px;
  width: 40px;
  height: 40px;
  background: rgba(210, 228, 255, 0.5);
  border-radius: 50%;
  border: 0px solid #A1A1A1;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.balloon:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -75px;
  width: 30px;
  height: 30px;
  background: rgba(210, 228, 255, 0.5);
  border-radius: 50%;
  border: 0px solid #A1A1A1;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.balloon p {
  margin: 0;
  padding: 0;
}
#main p code {
  font-size: 1.1rem;
  margin: 0 0.1rem;
  padding: 0.1em 0.25em;
  color: #67EC70;
  background-color: #000000;
}
.iframe-content {
  position: relative;
  width: 100%;
  padding: 56.25% 0 0 0;
}
.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*  (_)-(_)
     (o o)  home image
==ooO=(_)=Ooo===================================*/
.home-hero {
  width: 100vw;
  text-align: center;
}
.home-hero-text {
  width: 100vw;
  position: absolute;
  bottom: 0%;
  color: #E4E4E4;
  font-family: 'Raleway', 'Sawarabi Gothic', "sans-serif";
  font-feature-settings: "palt";
  text-shadow: 5px 5px 10px #231815;
}
@media (orientation: landscape) {
  .home-hero-text {
    font-size: 3vh;
  }
  .home-hero img {
    height: 80vh;
    object-fit: contain;
  }
}
@media (orientation: portrait) {
  .home-hero-text {
    font-size: 3vw;
  }
  .home-hero img {
    height: 68vh;
    object-fit: contain;
    object-position: 50% 10%;
  }
}
.home-kana {
  font-size: clamp(10px, 0.5em, 26px);
  font-weight: 200;
  line-height: 3.3;
  color: #C8CCE0;
}
.home-name {
  font-size: clamp(28px, 1.5em, 80px);
  font-weight: 200;
  line-height: 0;
  margin-bottom: 1.0em;
  color: #C8CCE0;
}
.home-subname {
  font-size: clamp(22px, 1em, 40px);
  font-weight: 300;
  line-height: 0;
  margin-bottom: 1.0em;
}
.home-headline {
  font-size: clamp(16px, 1.2em, 50px);
  font-weight: 200;
  line-height: 1.0;
  margin-bottom: 0em;
  color: #CAB785;
}
/* home button selection
--------------------------------------------------*/
.home-button {
  width: 30vw;
  border: 1px solid #73D4D2;
  border-radius: 50vh;
  backdrop-filter: blur(5px);
  margin: 20px auto 30px;
  text-align: right;
}
.home-button a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-size: clamp(16px, 0.7em, 24px);
  text-decoration: none;
  color: #73D4D2;
  border-radius: 50vh;
  padding: 10px;
  display: block;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.3);
}
.home-button a::after {
  content: '\276f';
  float: right;
  padding-left: 15px;
  padding-right: 15px;
  transition: all 500ms ease-in-out;
}
.home-button:hover {
  border: 1px solid white;
}
.home-button a:hover {
  color: var(--lightorange);
}
.home-button:hover a::after {
  content: '\276f';
  padding-right: 0px;
  transition: all 500ms ease-in-out;
}
/*  (_)-(_)
     (o o)  product hero
==ooO=(_)=Ooo===================================*/
.color-gold {
  font-family: 'Raleway', 'Hiragino Sans', "游ゴシック", "Yu Gothic";
  font-size: clamp(5rem, 0.161rem + 19.2vw, 29.375rem);
  color: transparent;
  background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em);
  background-size: 100% 400%;
  -webkit-background-clip: text;
  filter: drop-shadow(5px 5px 3px #785101);
  animation: shine-gold 60s ease-in-out alternate infinite;
  margin-top: 0.2em;
  line-height: 1;
}
#hero-img-gold {
  background-image: linear-gradient(73deg, hsl(36deg 30% 43%) 0%, hsl(40deg 32% 49%) 8%, hsl(42deg 34% 55%) 17%, hsl(45deg 35% 62%) 25%, hsl(50deg 56% 74%) 33%, hsl(56deg 77% 86%) 42%, hsl(60deg 100% 99%) 50%, hsl(56deg 77% 86%) 58%, hsl(50deg 56% 74%) 67%, hsl(45deg 35% 62%) 75%, hsl(42deg 34% 55%) 83%, hsl(40deg 32% 49%) 92%, hsl(36deg 30% 43%) 100%);
  background-size: 100% 400%;
  animation: shine-gold 5s ease-in-out alternate infinite;
  background-blend-mode: multiply;
}
#hero-img-gold img {
  filter: drop-shadow(5px 5px 5px #231815);
}
@keyframes shine-gold {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}
#hero-img-company {
  background-image: url(../images/top/top-company-bg.svg), linear-gradient(45deg, var(--burgundy) 0%, var(--burgundy) 100%);
  background-blend-mode: normal;
  background-position: center center;
  background-size: cover;
}
#hero-img-company img {
  width: 40vh;
  filter: drop-shadow(5px 5px 10px #000000);
}
#hero-img-twelite {
  background-image: linear-gradient(180deg, hsl(240deg 100% 37%) 0%, hsl(289deg 100% 34%) 33%, hsl(315deg 100% 39%) 46%, hsl(330deg 100% 47%) 56%, hsl(338deg 100% 50%) 64%, hsl(352deg 100% 57%) 71%, hsl(19deg 100% 57%) 78%, hsl(36deg 100% 50%) 85%, hsl(46deg 100% 50%) 91%, hsl(55deg 100% 50%) 100%);
  background-size: 100% 200%;
  /* animation: gradient 10s linear alternate infinite;*/
  height: 100%;
}
@keyframes gradient {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
#hero-img-twelite img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-uart {
  background-image: url(../images/top/top-twist.svg), linear-gradient(45deg, #4841D0 0%, #8c3db1 43%, #e9ad29 100%);
  background-blend-mode: color-burn;
  background-size: cover;
}
@keyframes gradient-uart {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
#hero-img-uart img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#bg-img-uart {
  background-image: linear-gradient(45deg, #4841D0 0%, #8c3db1 43%, #e9ad29 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.6) 100%);
  background-blend-mode: color;
}
#hero-img-bandr {
  background: linear-gradient(to right, #0b162c 50%, #5F0000 50%);
}
#hero-img-twelite-red {
  /*background: linear-gradient(to bottom, #fff5b8 0%,#740c10 20%,#a82c18 60%,#a82c18 70%,#f15a24 100%);/*autumn*/
  background: linear-gradient(to bottom, #FFF5B8 0%, #FFF5B8 5%, #740c10 60%, #740c10 95%, #f15a24 100%); /*winter*/
}
#hero-img-dip {
  background: linear-gradient(to bottom, #EF855C 0%, #03819A 30%, #027187 50%, #1F1D2B 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%), url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='120' height='80' patternTransform='scale(8) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 100%, 0)'/><path d='M-50.129 12.685C-33.346 12.358-16.786 4.918 0 5c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='0.5' stroke='hsla(20,59%,59%,0.10)' fill='none'/><path d='M-50.129 32.685C-33.346 32.358-16.786 24.918 0 25c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='0.5' stroke='hsla(193,64%,60%,0.2)' fill='none'/><path d='M-50.129 52.685C-33.346 52.358-16.786 44.918 0 45c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='0.5' stroke='hsla(231, 48%, 48%, 0.2)' fill='none'/><path d='M-50.129 72.685C-33.346 72.358-16.786 64.918 0 65c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='0.5' stroke='hsla(0, 0%, 0%, 0.1)' fill='none'/><path d='M-50.129 72.685C-33.346 72.358-16.786 64.918 0 65c16.787.082 43.213 10 60 10s43.213-9.918 60-10c16.786-.082 33.346 7.358 50.129 7.685'  stroke-width='0.5' stroke='hsla(0, 0%, 0%, 0.1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-376,0)' fill='url(%23a)'/></svg>");
  background-blend-mode: multiply;
  background-size: 200% 150%;
  /* animation: gradient-dip 20s alternate infinite; */
  height: 100%;
}
@keyframes gradient-dip {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 20%;
  }
}
#hero-img-dip img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-liter {
  background-color: #6F80FF;
  background-image:
    radial-gradient(at 96% 37%, hsla(328, 62%, 57%, 1.00) 0, transparent 54%), radial-gradient(at 68% 66%, hsla(230, 69%, 55%, 1.00) 0, transparent 60%), radial-gradient(at 48% 47%, hsla(178, 74%, 45%, 1.00) 0, transparent 80%), radial-gradient(at 99% 12%, hsla(177, 74%, 66%, 1) 0, transparent 44%), radial-gradient(at 6% 71%, hsla(325, 73%, 63%, 1) 0, transparent 45%), radial-gradient(at 97% 33%, hsla(336, 72%, 70%, 1) 0, transparent 52%), radial-gradient(at 78% 70%, hsla(161, 82%, 63%, 1) 0, transparent 54%);
}
#hero-img-liter img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-sta-brd {
  background-image: radial-gradient(50% 150%, #9D5A2C 5%, #7E4723 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%), url(../images/top/top_mesh.svg);
  background-blend-mode: color;
  background-size: cover;
}
#hero-img-sta-brd img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-books {
  background-image: radial-gradient(50% 150%, #8468D5 5%, #5935C1 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%), url(../images/top/top_mesh.svg);
  background-blend-mode: color;
  background-size: cover;
}
#hero-img-books img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#bg-mech {
  background-image: radial-gradient(150% 150%, #074F6C 0%, #136384 50%, #074F6C 100%), url("../../assets/bg-mech-frame.svg"), url("../../assets/bg-mech.png");
  background-blend-mode: soft-light;
  background-size: cover;
}
#hero-img-sta-hat {
  background-image: radial-gradient(50% 150%, #B10F3F 5%, #7E0A2C 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%), url(../images/top/top_mesh.svg);
  background-blend-mode: color;
  background-size: cover;
}
#hero-img-sta-hat img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-sta-kit {
  background-image: radial-gradient(50% 150%, #706F51 5%, #453F29 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%), url(../images/top/top_mesh.svg);
  background-blend-mode: multiply, multiply;
  background-size: cover;
}
#hero-img-sta-kit img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-stage-app {
  background-image: radial-gradient(50% 150%, #9C8C76 0%, #3C3424 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%);
  background-blend-mode: multiply;
}
#hero-img-stage-app img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-pal {
  background:
    linear-gradient(30deg, rgba(114, 0, 168, 0.90), rgba(255, 0, 0, 0) 100%), linear-gradient(220deg, rgba(233, 173, 41, 0.90), rgba(255, 0, 0, 0) 60%), linear-gradient(130deg, rgba(255, 0, 0, 0.90), rgba(0, 255, 0, 0) 60%), linear-gradient(330deg, rgba(9, 0, 198, 0.90), rgba(0, 0, 255, 0) 100%);
}
#hero-img-pal img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-monostick {
  /*background: linear-gradient(to bottom, #FFF5B8 0%,#FFF5B8 5%,#F15A24 60%,#F15A24 70%,#7F4226 100%);/*autumn*/
  background: linear-gradient(to bottom, #FFF5B8 0%, #FFF5B8 5%, #740c10 60%, #740c10 95%, #f15a24 100%);
}
#hero-img-monostick img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-2525a {
  background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #EF9D69 0%, #a6718f 15%, #223962 65%, #0b162c 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
}
#hero-img-2525a img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-solar {
  background: -webkit-radial-gradient(center top, circle cover, #FFE560 0%, #C3C400 10%, #B63200 60%, #83171B 100%);
}
#hero-img-solar img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-apps {
  /*background: radial-gradient(circle, #17918F 0%,#17918F 23%,#7FAAC7 62%,#DEB9E1 100%);/*spring*/
  /*background: radial-gradient(circle, #188381 0%,#CD8664 100%);/*autumn*/
  /*background: radial-gradient(circle, #66686f 0%,#376471 100%);/*winter*/
  background-color: #376471;
  background-image: -webkit-radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-blend-mode: normal, multiply;
}
#hero-img-apps img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-pxxxx {
  /*background: radial-gradient(circle, #17918F 0%,#17918F 23%,#7FAAC7 62%,#DEB9E1 100%);/*spring*/
  /*background: radial-gradient(circle, #188381 0%,#CD8664 100%);/*autumn*/
  /*background: radial-gradient(circle, #66686f 0%,#376471 100%);/*winter*/
  background-color: #C1974E;
  background-image: -webkit-radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
  background-blend-mode: normal, multiply;
}
#hero-img-pxxxx img {
  filter: drop-shadow(1px 1px 3px #231815);
}
#hero-img-bp01 {
  /*background: linear-gradient(-45deg, #002433 0%,#358AA9 50%,#002433 100%);*/
  background: #002433;
  background-image: -webkit-linear-gradient(right, #7B7F82 2%, #303136 100%), -webkit-radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(149deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(-90deg, #7B7F82 2%, #303136 100%), radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(-59deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: normal, multiply, multiply;
}
#hero-img-bp01 img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-eh {
  background: -webkit-radial-gradient(center left, ellipse farthest-side, #17918F 0%, #17918F 5%, #5B92B7 75%, #6B61B3 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
}
#hero-img-eh img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-retail {
  background: radial-gradient(circle, #e3e3e3 0%, #e3e3e3 100%);
}
#hero-img-retail img {
  display: block;
}
#hero-img-d114 {
  background: #5A3260;
  background-image: -webkit-radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-image: radial-gradient(at 50% 85%, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  background-blend-mode: normal, multiply;
}
#hero-img-d114 img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-d85 {
  background-image: repeating-linear-gradient(45deg, hsla(80, 0%, 18%, 0.2) 0px, hsla(80, 0%, 18%, 0.2) 1px, transparent 1px, transparent 4px, hsla(80, 0%, 18%, 0.2) 4px, hsla(80, 0%, 18%, 0.2) 5px, transparent 5px, transparent 9px, hsla(80, 0%, 18%, 0.2) 9px, hsla(80, 0%, 18%, 0.2) 10px), repeating-linear-gradient(0deg, hsla(80, 0%, 18%, 0.2) 0px, hsla(80, 0%, 18%, 0.2) 1px, transparent 1px, transparent 4px, hsla(80, 0%, 18%, 0.2) 4px, hsla(80, 0%, 18%, 0.2) 5px, transparent 5px, transparent 9px, hsla(80, 0%, 18%, 0.2) 9px, hsla(80, 0%, 18%, 0.2) 10px), repeating-linear-gradient(90deg, hsla(80, 0%, 18%, 0.2) 0px, hsla(80, 0%, 18%, 0.2) 1px, transparent 1px, transparent 3px, hsla(80, 0%, 18%, 0.2) 3px, hsla(80, 0%, 18%, 0.2) 4px, transparent 4px, transparent 8px, hsla(80, 0%, 18%, 0.2) 8px, hsla(80, 0%, 18%, 0.2) 9px), linear-gradient(90deg, rgb(146, 74, 144), rgba(195, 119, 187, 1.00));
}
#hero-img-d85 img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-ant {
  background-color: #BDB5B2;
  background-blend-mode: multiply;
  background-image: linear-gradient(to left, rgba(195, 195, 195, 0.5) 0%, #A1A1A1 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 1.0) 100%);
}
#hero-img-ant img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-ota {
  /*background: linear-gradient(to bottom, #FFF5B8 0%,#FFF5B8 5%,#F15A24 60%,#F15A24 70%,#7F4226 100%);/*autumn*/
  background: linear-gradient(to bottom, #FFE4B8 0%, #FFE4B8 5%, #FFE4B8 40%, #FFB640 70%, #9B5F00 100%); /*winter*/
}
#hero-img-ota img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-stage {
  background-image: radial-gradient(ellipse 23vh 17vh, #F438A6 0%, #260516 80%);
}
#hero-img-stage img {
  filter: drop-shadow(5px 5px 10px #231815);
}
#hero-img-wings {
  background-image: radial-gradient(at 50%, #75698B 0%, #231F29 30%);
}
#hero-img-wings img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#hero-img-cue {
  background-image: repeating-radial-gradient(circle at bottom left, transparent 0, #030755), repeating-linear-gradient(#B209E2, #2E35C9, #750696, #030651), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.5) 95%);
  background-blend-mode: normal, multiply;
}
#hero-img-cue img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#hero-img-aria {
  background-image: repeating-radial-gradient(circle at bottom left, transparent 0, #B95315), repeating-linear-gradient(#C73EED, #C94F2D, #AE2FD4, #510213);
  background-blend-mode: multiply;
}
#hero-img-aria img {
  filter: drop-shadow(5px 5px 5px #4A322C);
}
#hero-img-spot {
  background-image: repeating-radial-gradient(circle at bottom left, transparent 0, #1534B9), linear-gradient(#3E5CED, #C94F2D);
  background-blend-mode: multiply;
  height: 100%;
}
#hero-img-spot img {
  filter: drop-shadow(5px 5px 5px #4A322C);
  width: 128px;
  height: 128px;
}
#hero-img-earth {
  background: #000000;
}
#bg-color-app-twelite {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(166, 57, 106, 1.0) 0%, rgba(99, 6, 60, 1.0) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-twelite img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-tag {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, #514D8B 0%, #2E2B41 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-tag img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-io {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, #BD5020 0%, #79331A 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-io img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-uart {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, #40782F 0%, #1F3C17 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-uart img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-pal {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, #D46570 0%, #CB4755 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-pal img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-ota {
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, #5e3117 0%, #432310 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-ota img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-interactive {
  background-blend-mode: multiply;
  background-image: -webkit-radial-gradient(center, ellipse, #742876 0%, #351136 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-interactive img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-act {
  background-blend-mode: multiply;
  background-image: radial-gradient(ellipse 100% 50%, #9EBCE2 0%, #231F29 55%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-act img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-wings {
  background-image: radial-gradient(at 50%, #75698B 0%, #231F29 45%);
}
#bg-color-app-wings img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-cue {
  background-blend-mode: multiply;
  background-image: -webkit-radial-gradient(center, ellipse, #223776 0%, #16244b 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-cue img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-app-aria {
  background-blend-mode: multiply;
  background-image: -webkit-radial-gradient(center, ellipse, #AC284E 0%, #8e2141 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 90%);
}
#bg-color-app-aria img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-y {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 136, 117, 1) 100%);
}
#bg-color-y img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-b {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(117, 162, 160, 1) 100%);
}
#bg-color-b img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-r {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 117, 139, 1) 100%);
}
#bg-color-r img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#bg-color-o {
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 161, 117, 0.7) 100%);
}
#bg-color-o img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-solar {
  background: -webkit-radial-gradient(circle cover, #FFDB27 0%, #BABB00 10%, #C93700 60%, #8C191C 100%);
}
#card-bg-ant {
  background-color: #877974;
  background-blend-mode: multiply;
  background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(161, 161, 161, 1.00) 100%), -webkit-linear-gradient(225deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.10) 95%);
  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(161, 161, 161, 1.00) 100%), -moz-linear-gradient(225deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.10) 95%);
  background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(161, 161, 161, 1.00) 100%), -o-linear-gradient(225deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.10) 95%);
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, #A1A1A1 100%), linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 95%);
}
#card-bg-2525a {
  background-image: -webkit-radial-gradient(center, ellipse, #F4B892 0%, #a6718f 20%, #15243E 60%, #000000 100%);
}
#card-bg-twelite {
  background: linear-gradient(180deg, #1f005c, #6b0074, #a00200, #b86e00);
}
#card-bg-dip {
  background: linear-gradient(to bottom, #EF855C 0%, #03819A 10%, #027187 40%, #1F1D2B 100%);
}
#card-bg-monostick {
  background: linear-gradient(to bottom, #FFF5B8 0%, #740c10 30%, #740c10 100%);
}
#card-bg-monostick {
  background: linear-gradient(to bottom, #FFF5B8 0%, #740c10 30%, #740c10 100%);
}
#card-bg-books {
  background: linear-gradient(to bottom, #DFBF75 0%, #77390B 60%, #740c10 100%);
}
#card-bg-app-twe {
  background-image: -webkit-radial-gradient(center, ellipse, #870A52 0%, #A6396A 100%);
}
#card-bg-app-twe img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-tag {
  background-image: -webkit-radial-gradient(center, ellipse, #534E75 0%, #514D8B 100%);
}
#card-bg-app-tag img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-io {
  background-image: -webkit-radial-gradient(center, ellipse, #A14524 0%, #BD5020 100%);
}
#card-bg-app-io img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-uart {
  background-image: -webkit-radial-gradient(center, ellipse, #2B5220 0%, #40782F 100%);
}
#card-bg-app-uart img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-pal {
  background-image: -webkit-radial-gradient(center, ellipse, #CF535F 0%, #D46570 100%);
}
#card-bg-app-pal img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-stage {
  background-image: radial-gradient(circle at center 20%, #F438A6 0%, #260516 30%);
}
#card-bg-app-stage img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-act {
  background-image: radial-gradient(circle at center 25%, #9EBCE2 0%, #231F29 30%);
}
#card-bg-app-act img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-app-wings {
  background-image: radial-gradient(circle at center 30%, #75698B 0%, #231F29 20%);
}
#card-bg-app-wings img {
  filter: drop-shadow(5px 5px 5px #231815);
}
#card-bg-polality {
  background-image: linear-gradient(to bottom, #4394B0 0%, #2E6578 80%, #2E6578 100%);
}
#card-bg-app-polality img {
  filter: drop-shadow(5px 5px 5px #231815);
}
/*  (_)-(_)
     (o o)  hero product 
==ooO=(_)=Ooo===================================*/
.hero-scale {
  margin-top: 2px;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-scale img {
  width: 100%;
  height: 80vh;
  object-fit: contain;
  object-position: 50% 40%;
}
.hero-scale-jpg {
  margin-top: 2px;
  position: relative;
  width: 100%;
}
.hero-scale-jpg img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  object-position: 50% 100%;
}
.hero-scale svg {
  width: 40vh;
  height: 80vh;
  padding-top: 5%;
  padding-bottom: 20%;
}
#icon-stage {
  width: 100%;
  height: 80vh;
  margin: auto;
}
.hero-scale-svg {
  width: 100%;
  height: 80vh;
  margin: auto;
}
.hero-scale-svg img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  object-position: 50% 100%;
}
.hero-scale-fill {
  position: relative;
  width: 100%;
  height: 80vh;
}
.hero-scale-fill img {
  width: 100%;
  height: 80vh;
}
.hero-product {
  width: 100%;
  height: 80vh;
  text-align: center;
  animation: hero-product-img 3.5s linear;
  -webkit-animation: hero-product-img 3.5s linear;
  position: relative;
  overflow: hidden;
}
.hero-product-icon {
  margin: 0 auto 0 auto;
}
.hero-product-icon img {
  padding: 5% 10% 20% 10%;
}
.hero-product-text {
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 1.5em;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-feature-settings: "palt";
  animation: hero-product-text 2s linear;
  -webkit-animation: hero-product-text 2s linear;
  background: rgba(27, 8, 0, 0.80);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
@media (max-width : 500px) and (orientation: portrait) {
  .hero-product-text {
    font-size: 2vw;
  }
}
@media (max-height : 1000px) and (orientation: landscape) {
  .hero-product-text {
    font-size: 2vh;
  }
}
.hero-product-kana {
  font-size: clamp(12px, 0.9em, 26px);
  background: linear-gradient(60deg, hsla(236, 100%, 76%, 1.00) 35%, hsla(319, 100%, 70%, 1.00) 50%, hsla(63, 100%, 70%, 1.00) 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 400;
  line-height: 1.0;
  padding-top: 10px;
  margin-bottom: -6px;
}
.hero-product-name {
  /*	
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
  -webkit-background-clip: text;
  color: transparent;
*/
  font-family: 'Raleway', 'Hiragino Sans', "游ゴシック", "Yu Gothic";
  font-size: clamp(32px, 2.2em, 80px);
  background: linear-gradient(60deg, hsla(236, 100%, 76%, 1.00) 35%, hsla(319, 100%, 70%, 1.00) 50%, hsla(63, 100%, 70%, 1.00) 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 400;
  line-height: 1.2;
}
.hero-product-subname {
  font-size: clamp(22px, 1.5em, 40px);
  background: linear-gradient(60deg, hsla(39, 100%, 70%, 1.00) 30%, hsla(119, 100%, 70%, 1.00) 50%, hsla(205, 100%, 70%, 1.00) 70%);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 200;
  line-height: 1.2;
}
.hero-product-headline {
  font-size: clamp(24px, 1.7em, 50px);
  font-weight: 300;
  line-height: 1.5;
  color: #CAB785;
  /* text-shadow:1px 1px 0 #000000,-1px 1px 0 #000000,1px -1px 0 #000000,-1px -1px 0 #000000;  */
}
@-webkit-keyframes hero-product-img {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes hero-product-text {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/***********************************/
.product-hero {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  animation: product-hero-img 3s linear;
  -webkit-animation: product-hero-img 3s linear;
}
.product-hero-text {
  width: 100%;
  position: absolute;
  bottom: 0%;
  color: #EEEEEE;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-feature-settings: "palt";
  animation: product-hero-text 2s linear;
  -webkit-animation: product-hero-text 2s linear;
  text-shadow: 5px 5px 5px #231815;
}
@media (min-width: 768px) {
  .product-hero-text {
    font-size: 1.6rem;
    color: white;
  }
}
.product-hero-kana {
  font-size: 0.6em;
  color: white;
  font-weight: 200;
  line-height: 1.7;
}
.product-hero-name {
  font-family: 'Raleway', 'Hiragino Sans', "游ゴシック", "Yu Gothic";
  font-size: 1.4em;
  color: #C8CCE0;
  font-weight: 200;
  line-height: 0.5;
  margin-bottom: 0.5em;
}
.product-hero-subname {
  font-size: 0.9em;
  color: white;
  font-weight: 300;
  line-height: 1.0;
}
.product-hero-headline {
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 0.5em;
  color: #CAB785;
  /* text-shadow:1px 1px 0 #000000,-1px 1px 0 #000000,1px -1px 0 #000000,-1px -1px 0 #000000;  */
}
@-webkit-keyframes product-hero-img {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes product-hero-text {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/*  (_)-(_)
     (o o)  products top image
==ooO=(_)=Ooo===================================*/
.products-top-img {
  position: relative;
  width: 100%;
  text-align: center;
  display: grid;
  place-items: center;
}
.products-top-img img {
  display: block;
}
.products-top-text {
  width: 100%;
  position: absolute;
  bottom: 0%;
  color: #EEEEEE;
  font-family: 'Raleway', 'Hiragino Sans', "游ゴシック", "Yu Gothic";
  font-feature-settings: "palt";
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.products-top-kana {
  font-size: 0.7em;
  color: white;
  font-weight: 200;
  line-height: 2.6;
}
.products-top-name {
  font-family: 'Raleway', 'Hiragino Sans', "游ゴシック", "Yu Gothic";
  font-size: 1.3em;
  color: white;
  font-weight: 200;
  line-height: 0;
  margin-bottom: 0.8em;
}
.products-top-subname {
  font-size: 0.9em;
  color: white;
  font-weight: 300;
  line-height: 0.5;
}
.products-top-headline {
  font-size: 1.0em;
  font-weight: 400;
  line-height: 2.0;
  color: #E2D9BF;
}
/*  (_)-(_)
     (o o)  form anime
==ooO=(_)=Ooo===================================*/
.form-box {
  margin: auto;
  padding-top: 40px;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 40px;
  width: 650px;
  color: #666;
  border-radius: 3px;
  background: #FFF;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.group {
  position: relative;
  margin-bottom: 35px;
  margin-left: 40px;
  margin-right: 40px;
}
.inputMaterial {
  font-size: 18px;
  display: block;
  width: 90%;
  border: none;
  border-bottom: 1px solid #757575;
}
.inputMaterial:focus {
  outline: none;
}
select.selector1 {
  color: #C0C0C0;
  appearance: none;
  width: 100%;
  padding: 6px;
  text-indent: 0px;
  cursor: pointer;
}
/* LABEL ======================================= */
form label {
  color: #C0C0C0;
  font-size: 100%;
  position: absolute;
  left: 15px;
  top: 0px;
  transition: 0.2s ease all;
}
/* active state */
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label {
  top: -20px;
  font-size: 100%;
  color: #2F9693;
}
/* Radio ======================================= */
.label-radio input[type="radio"] {
  display: none;
}
.label-radio {
  cursor: pointer;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
.label-radio .lever {
  color: #2B2E35;
}
.label-radio input[type="radio"]:checked + .lever {
  color: #000000;
}
.label-radio .lever:before {
  content: '';
  border: 2px solid #eee;
  width: 12px;
  height: 12px;
  margin-right: 13px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 10px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:before {
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform: scale(2);
}
.label-radio .lever:after {
  content: '';
  opacity: 0;
  position: absolute;
  left: 5px;
  top: 0px;
  width: 7px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform: rotate(-200deg);
  -webkit-transition: all 350ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 350ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 350ms cubic-bezier(1, 0, 0, 1);
  transition: all 350ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:after {
  opacity: 1;
  position: absolute;
  left: 5px;
  top: 0px;
  width: 7px;
  height: 18px;
  border-right: 2px solid #0598BB;
  border-bottom: 3px solid #0598BB;
  transform: rotate(40deg);
}
/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before, .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #FFAA00;
  transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}
/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
  width: 50%;
}
/* active state */
.inputMaterial:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}
/*  (_)-(_)
     (o o)  header
==ooO=(_)=Ooo===================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  transition: .3s;
  height: 50px;
  width: 100%;
  background: linear-gradient(90deg, #2D0019, #751B43, #2D0019);
  opacity: 1;
  display: block;
}
/*  (_)-(_)
     (o o)  globalNavigation
==ooO=(_)=Ooo===================================*/
.gnavlogo {
  float: left;
  width: 160px;
}
.gnavIcon {
  display: inline;
  font-size: 1.0rem;
  margin-right: -0.8rem;
}
.globalNav {
  display: flex;
  gap: 20px;
  height: 50px;
  align-items: center;
}
.gnav-col a {
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2rem;
}
.gnav-col a:hover:not(.active) {
  text-decoration: underline;
}
.gnav-col a.active {
  text-decoration: underline;
  cursor: default;
}
/*  (_)-(_)
     (o o)  localNavigation - side
==ooO=(_)=Ooo===================================*/
#nosidebar {
  display: none;
}
#localNavigation h1, h5 {
  padding-top: 20px;
  padding-bottom: 3px;
  line-height: 1;
  text-align: center;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  font-size: 105%;
  color: #DC9E31;
  border-bottom: 1px solid #2F9693;
}
#localNavigation ul {
  list-style: none;
  width: 256px;
}
#localNavigation li {
  margin-top: 0px;
}
#localNavigation li a {
  display: block;
  color: #ffffff;
  border-bottom: 1px solid #2F9693;
  font-feature-settings: "palt";
  letter-spacing: 0em;
  padding: 0.5em 0px 0.5em 15px;
  text-decoration: none;
  font-size: 95%;
  font-family: 'Raleway';
}
#localNavigation li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f15b\00a0\00a0";
  color: powderblue;
}
#localNavigation li:first-child a {
  display: block;
  color: #ffffff;
  border-top: 1px solid #2F9693;
  font-feature-settings: "palt";
  letter-spacing: 0em;
  padding: 0.5em 0px 0.5em 15px;
  text-decoration: none;
  font-size: 100%;
}
#localNavigation li a:hover:not(.active) {
  color: #F2F5F5;
  box-shadow: 0 0 40px 40px #277D7B inset;
  transition: box-shadow 200ms ease-in-out;
}
#localNavigation li a.active {
  background-color: #2F9693;
  color: white;
  border: 1px solid #2F9693;
  cursor: default;
  box-shadow: none;
}
#localNavigation figcaption {
  color: white;
}
/*  (_)-(_)
     (o o)  localNavigation - side-left
==ooO=(_)=Ooo===================================*/
/* sideLeft button */
.sideLeft-menu {
  width: 250px;
  height: 90px;
  margin: 2px;
}
.sideLeft-menu a {
  display: block;
  width: 250px;
  height: 90px;
  text-align: center;
  border-radius: 0px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.sideLeft-menu a:hover {
  box-shadow: 0 0 50px 50px #277D7B inset;
  transition: box-shadow 300ms ease-out;
}
/****************************************/
.sideLeft-menu2 {
  width: 250px;
  height: 184px;
  margin: 2px;
}
.sideLeft-menu2 a {
  display: block;
  width: 250px;
  height: 184px;
  text-align: center;
  border-radius: 0px;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.sideLeft-menu2 a:hover {
  box-shadow: 0 0 80px 80px #277D7B inset;
  transition: box-shadow 300ms ease-out;
}
.sideLeft-menu2 img {
  max-width: 90px;
  height: auto;
  margin: 15px auto 10px auto;
}
/*  (_)-(_)
     (o o)  local Navigation - top
==ooO=(_)=Ooo===================================*/
#localNavigation-upper-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  height: 50px;
  width: 100%;
  background-color: rgba(0, 95, 107, 0.20);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px) saturate(190%);
  backdrop-filter: blur(10px) saturate(190%);
}
#localNavigation-upper {
  width: 100%;
  height: 50px;
  opacity: 1.0;
  z-index: 3;
  position: fixed;
  top: 0px;
  left: 150px;
  display: flex;
  align-items: center;
}
#localNavigation-upper ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  text-align: center;
}
#localNavigation-upper li {
  text-decoration: none;
  display: inline-block;
}
#localNavigation-upper li a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  color: #FFFFFF;
  padding: 5px 9px;
  text-decoration: none;
  border: 1px solid #FFFFFF;
  border-radius: 15px;
  font-size: 90%;
  background-color: rgba(0, 0, 0, 0.30);
}
#localNavigation-upper li a:hover:not(.active) {
  color: white;
  box-shadow: 0 0 40px 40px #39B6B2 inset;
  transition: box-shadow 500ms ease-in-out, color 500ms ease-in-out;
}
#localNavigation-upper li a.active {
  background-color: rgba(47, 150, 147, 0.90);
  color: white;
  border: 1px solid #FFFFFF;
  cursor: default;
  box-shadow: none;
}
/*  (_)-(_)
     (o o)  ハンバーガーアイコン
==ooO=(_)=Ooo===================================*/
.drawer-open .drawer-overlay {
  display: block;
}
.drawer-nav {
  margin-top: 50px;
  position: fixed;
  z-index: 9999;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #DFDFDF;
  background-color: rgba(1, 54, 38, 0.81);
}
.drawer-nav h1 {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--darkorange);
  text-align: center;
  border-bottom: 1px solid #2F9693;
}
.drawer-open .drawer-overlay {
  display: block;
}
.drawer-hamburger {
  position: fixed;
  top: 0;
  z-index: 104;
  box-sizing: content-box;
  width: 35px;
  padding-top: 14px;
  padding-bottom: 24px;
  padding-right: 10px;
  padding-left: 10px;
  border: 0;
  outline: 0;
  background-color: #2B0319;
  transition: all 1.0s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transform: translate3d(0, 0, 0);
}
.drawer--right .drawer-nav {
  right: -100vw;
  -webkit-transition: right 1.0s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right 1.0s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
}
.drawer--right.drawer-open .drawer-hamburger {
  right: 0px;
}
.drawer-hamburger-icon {
  position: relative;
  display: block;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
  width: 100%;
  height: 2px;
  -webkit-transition: all 1.0s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all 1.0s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #B4A58A;
}
.drawer--top.drawer-open .drawer-nav {
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* ボタン２ */
.Button2 {
  clear: both;
  overflow: hidden;
  width: 160px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 20px;
  display: block;
}
.Button2 a {
  display: block;
  position: relative;
  /*z-index: 2;*/
  text-align: center;
  background-color: rgba(255, 255, 255, .25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
  color: #ffffff;
  font-size: 90%;
  line-height: 40px;
  text-decoration: none;
  overflow: hidden;
}
.Button2 a:hover {
  box-shadow: 0 0 20px 5px #2F9693 inset;
}
.Button2:active {
  box-shadow: none;
  text-shadow: none;
}
/* ボタン3 */
.Button3 {
  position: absolute;
  left: calc(50% - 80px);
  bottom: 30px;
  overflow: hidden;
  width: 160px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #ffffff;
}
.Button3 a {
  display: block;
  position: relative;
  text-align: center;
  background-color: rgba(255, 255, 255, .25);
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);
  color: ghostwhite;
  font-size: 90%;
  line-height: 40px;
  text-decoration: none;
  overflow: hidden;
}
.Button3 a:hover {
  box-shadow: 0 0 20px 5px #2F9693 inset;
  color: #ffffff;
}
.Button3:active {
  box-shadow: none;
  text-shadow: none;
}
/* submit button */
button.button-submit {
  width: 178px;
  height: 38px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  text-align: center;
  line-height: 2.6;
  background-color: ghostwhite;
  border: 2px solid #2F9693;
  border-radius: 20px;
  color: #2F9693;
  text-decoration: none;
}
button.button-submit:hover {
  color: #fff;
  box-shadow: 0 0 40px 40px #2F9693 inset;
  transition: box-shadow 500ms ease-in-out, color 500ms ease-in-out;
  cursor: pointer;
}
/*  (_)-(_)
     (o o)  content
==ooO=(_)=Ooo===================================*/
#content {
  width: 100%;
}
/*  (_)-(_)
     (o o)  main
==ooO=(_)=Ooo===================================*/
#main {
  padding-top: 50px;
  width: calc(100% - 256px - 256px);
  float: left;
  background-color: #C9C9DC;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 780' width='600' height='600'><path fill='%23e6daf1' fill-opacity='0.22' d='m690,141.32v-46.32c0-52.47-42.53-95-95-95h-46.32c-16.04,29.77-47.5,50-83.68,50-36.19,0-67.64-20.23-83.68-50h-72.63c-16.04,29.77-47.5,50-83.68,50-36.18,0-67.64-20.23-83.68-50h-46.32C42.53,0,0,42.53,0,95v46.32c29.77,16.04,50,47.5,50,83.68S29.77,292.64,0,308.68v72.63c29.77,16.04,50,47.5,50,83.68,0,36.19-20.23,67.64-50,83.68v46.32c0,52.47,42.53,95,95,95h46.32c16.04-29.77,47.5-50,83.68-50,36.19,0,67.64,20.23,83.68,50h72.63c16.04-29.77,47.5-50,83.68-50,36.18,0,67.64,20.23,83.68,50h46.32c52.47,0,95-42.53,95-95v-46.32c-29.77-16.04-50-47.5-50-83.68,0-36.18,20.23-67.64,50-83.68v-72.63c-29.77-16.04-50-47.5-50-83.68,0-36.19,20.23-67.64,50-83.68Zm-221.17,71.02l-17.35,17.66c-6.58-6.28-13.06-11.96-21.11-18.52-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.56,5.47,7.85,6.39,14.16,11.92,20.56,18.03l-13.36,13.59c-6.05-5.77-12.05-11.02-19.51-17.1-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.57,5.47,7.26,5.91,13.09,11.01,18.96,16.6l-17.42,17.73c-18.35-17.14-38.46-31.82-59.86-43.91l42.89-72.34c27.45,15.62,52.96,34.47,75.97,56.19Zm-153.92-90.13c24.78,7.77,48.6,17.9,71.17,30.17l-25.94,43.74c-1.08-.54-2.1-1.01-3.1-1.47-1.25-.57-2.55-1.17-3.98-1.91-1.91-.98-4.24-.22-5.22,1.69-.98,1.91-.22,4.25,1.68,5.23,1.59.82,2.96,1.45,4.29,2.06.79.36,1.56.72,2.35,1.1l-13,21.93c-10.13-5.39-20.53-10.21-31.16-14.45l9.35-24.45c.77-2-.23-4.25-2.23-5.02-2-.77-4.24.23-5.01,2.24l-9.35,24.44c-10.67-3.95-21.56-7.31-32.62-10.08l19.26-81.8c7.88,1.96,15.72,4.14,23.49,6.58Zm-82.51-16.62c17.29,1.63,34.48,4.38,51.47,8.25l-19.26,81.8c-12.79-2.87-25.79-4.95-38.92-6.21l6.71-83.84Zm50.28,171.68l-32.57,77.68c-8.57-3.21-17.4-5.66-26.39-7.33l5.84-25.02c.49-2.09-.81-4.18-2.89-4.67-2.09-.49-4.17.81-4.66,2.9l-5.96,25.55c-8.79-1.18-17.69-1.61-26.62-1.27l-2.87-26.22c-.23-2.13-2.14-3.67-4.27-3.44-2.13.23-3.66,2.15-3.43,4.29l2.83,25.89c-8.5.76-16.99,2.21-25.39,4.43l-21.41-81.52c23.6-6.22,47.69-8.64,71.46-7.52l-1.87,27.25c-.15,2.14,1.47,4,3.6,4.14.09,0,.18,0,.27,0,2.02,0,3.72-1.57,3.86-3.62l1.87-27.29c23.53,1.87,46.66,7.21,68.59,15.76ZM135.25,108.25l4.14,28.96c.28,1.94,1.93,3.33,3.83,3.33.18,0,.37-.01.56-.04,2.12-.31,3.59-2.27,3.29-4.4l-4.14-28.93c12.42-1.62,24.88-2.65,37.36-3.1l.91,27.93c.07,2.1,1.79,3.76,3.87,3.76.04,0,.09,0,.13,0,2.14-.07,3.82-1.87,3.75-4.01l-.91-27.88c12.23-.21,24.45.15,36.64,1.06l-6.71,83.85c-14.95-1.06-30.06-1.07-45.22.01l-2.33-29.33c-.17-2.14-2.02-3.74-4.17-3.57-2.13.17-3.72,2.04-3.56,4.18l2.33,29.37c-15.77,1.52-31.57,4.21-47.28,8.13l-20.24-81.84c12.5-3.11,25.1-5.6,37.76-7.5Zm54.75,491.75c-55.23,0-100-44.77-100-100,0-55.23,44.77-100,100-100,55.23,0,100,44.77,100,100,0,55.23-44.77,100-100,100Zm67.3-242.16l32.55-77.64c31.86,13.62,60.94,34.14,84.69,60.77l-65.22,53.4c-14.84-15.83-32.62-28.16-52.01-36.54Zm75.77,69.89l22.46-11.64c1.9-.99,2.65-3.33,1.66-5.24-.98-1.91-3.32-2.65-5.22-1.67l-22.69,11.76c-4.23-7.14-9.05-13.98-14.45-20.4-.11-.13-.22-.25-.33-.37l65.11-53.31c16.19,19.42,29.02,41.21,38.24,64.37l-28.81,10.31c-2.02.72-3.07,2.94-2.35,4.97.57,1.59,2.06,2.58,3.65,2.58.43,0,.87-.07,1.3-.23l28.96-10.36c3.76,10.39,6.81,21.03,9.11,31.83l-82.99,13.62c-3.03-12.56-7.61-24.74-13.65-36.22Zm96.32,124.66v.08s-81.98-18.36-81.98-18.36c4.63-20.73,4.82-42.04.95-62.55l82.85-13.6c5.58,31,5.15,63.15-1.81,94.43Zm32.31-216.98c-8.5-13.69-18.14-26.8-28.9-39.18-5.58-6.42-11.38-12.57-17.38-18.45l59-60.05c7.54,7.4,14.8,15.1,21.75,23.12,7.42,8.53,14.4,17.34,20.98,26.38l-20.59,14.39c-1.17.71-1.99,1.85-2.25,3.15-.27,1.31.05,2.68.84,3.72l13.58,18.56-47.02,28.38Zm4.01,6.65l72.04-43.47c16.06,27.27,28.63,56.24,37.54,86.21l-24.53,7.47c-2.49-8.83-4.72-16.26-8.04-25.06-.76-2.01-2.99-3.02-4.99-2.26-2,.76-3.01,3-2.25,5.01,3.23,8.57,5.42,15.87,7.87,24.58l-17.99,5.48c-2.35-7.94-4.98-15.85-7.9-23.58-.76-2.01-3-3.02-5-2.26-2,.76-3.01,3-2.25,5.01,2.86,7.57,5.44,15.32,7.74,23.09l-23.07,7.03c-6.91-23.37-16.67-45.96-29.14-67.25Zm54.32,67.7c2.27,8.41,4.23,16.97,5.82,25.52.35,1.87,1.98,3.17,3.81,3.17.24,0,.47-.02.72-.07,2.1-.39,3.49-2.42,3.1-4.53-1.64-8.82-3.68-17.67-6.02-26.35l49.97-15.22c8.74,31.71,13.41,64.48,13.82,97.49l-25.19.18c-.17-9.73-.7-19.52-1.62-29.14-.21-2.14-2.11-3.7-4.23-3.49-2.13.21-3.69,2.11-3.48,4.24.9,9.4,1.42,18.96,1.59,28.45l-51.12.37c-.35-24.89-3.8-49.61-10.23-73.58l23.07-7.03Zm59.28,179.89h-.08l-23.61-6.09c2.19-8.93,4.07-18.05,5.57-27.13.35-2.12-1.08-4.12-3.19-4.47-2.11-.35-4.11,1.08-4.46,3.2-1.47,8.86-3.3,17.75-5.43,26.47l-50.25-12.97c5.97-23.29,9.04-46.95,9.32-70.5l24.25-.18c-.04,7.93-.35,15.92-.95,23.79-.16,2.14,1.44,4.01,3.57,4.17.1,0,.2.01.3.01,2.01,0,3.71-1.55,3.86-3.59.61-8.08.93-16.29.97-24.43l52.08-.38c-.24,30.76-4.17,61.69-11.96,92.12Z'></path><path fill='%23e6daf1' fill-opacity='0.22' d='m408.19,503.7h-.03l-29.1.23c-2.14.02-3.86,1.77-3.85,3.92.02,2.14,1.75,3.86,3.87,3.86h.03l29.1-.23c2.14-.02,3.86-1.77,3.85-3.92-.02-2.14-1.75-3.86-3.87-3.86Z'></path><path fill='%23e6daf1' fill-opacity='0.22' d='m320.24,324.34c-1.77-1.21-4.18-.75-5.39,1.02l-17.24,25.37c-1.21,1.77-.75,4.19,1.02,5.4.67.46,1.43.68,2.18.68,1.24,0,2.46-.59,3.21-1.7l17.24-25.36c1.21-1.77.75-4.19-1.02-5.4Z'></path><path fill='%23e6daf1' fill-opacity='0.22' d='m322.97,169.62c.44.16.88.23,1.32.23,1.58,0,3.07-.98,3.64-2.56l6-16.57c.73-2.02-.31-4.25-2.32-4.98-2.01-.73-4.24.31-4.97,2.33l-6,16.57c-.73,2.02.31,4.25,2.32,4.98Z'></path></svg>");
}
@media (prefers-color-scheme: dark) {
  #main {
    background-color: #383838;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 780' width='600' height='600'><path fill='%23534e57' fill-opacity='0.22' d='m690,141.32v-46.32c0-52.47-42.53-95-95-95h-46.32c-16.04,29.77-47.5,50-83.68,50-36.19,0-67.64-20.23-83.68-50h-72.63c-16.04,29.77-47.5,50-83.68,50-36.18,0-67.64-20.23-83.68-50h-46.32C42.53,0,0,42.53,0,95v46.32c29.77,16.04,50,47.5,50,83.68S29.77,292.64,0,308.68v72.63c29.77,16.04,50,47.5,50,83.68,0,36.19-20.23,67.64-50,83.68v46.32c0,52.47,42.53,95,95,95h46.32c16.04-29.77,47.5-50,83.68-50,36.19,0,67.64,20.23,83.68,50h72.63c16.04-29.77,47.5-50,83.68-50,36.18,0,67.64,20.23,83.68,50h46.32c52.47,0,95-42.53,95-95v-46.32c-29.77-16.04-50-47.5-50-83.68,0-36.18,20.23-67.64,50-83.68v-72.63c-29.77-16.04-50-47.5-50-83.68,0-36.19,20.23-67.64,50-83.68Zm-221.17,71.02l-17.35,17.66c-6.58-6.28-13.06-11.96-21.11-18.52-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.56,5.47,7.85,6.39,14.16,11.92,20.56,18.03l-13.36,13.59c-6.05-5.77-12.05-11.02-19.51-17.1-1.66-1.35-4.1-1.1-5.45.57-1.35,1.67-1.1,4.11.57,5.47,7.26,5.91,13.09,11.01,18.96,16.6l-17.42,17.73c-18.35-17.14-38.46-31.82-59.86-43.91l42.89-72.34c27.45,15.62,52.96,34.47,75.97,56.19Zm-153.92-90.13c24.78,7.77,48.6,17.9,71.17,30.17l-25.94,43.74c-1.08-.54-2.1-1.01-3.1-1.47-1.25-.57-2.55-1.17-3.98-1.91-1.91-.98-4.24-.22-5.22,1.69-.98,1.91-.22,4.25,1.68,5.23,1.59.82,2.96,1.45,4.29,2.06.79.36,1.56.72,2.35,1.1l-13,21.93c-10.13-5.39-20.53-10.21-31.16-14.45l9.35-24.45c.77-2-.23-4.25-2.23-5.02-2-.77-4.24.23-5.01,2.24l-9.35,24.44c-10.67-3.95-21.56-7.31-32.62-10.08l19.26-81.8c7.88,1.96,15.72,4.14,23.49,6.58Zm-82.51-16.62c17.29,1.63,34.48,4.38,51.47,8.25l-19.26,81.8c-12.79-2.87-25.79-4.95-38.92-6.21l6.71-83.84Zm50.28,171.68l-32.57,77.68c-8.57-3.21-17.4-5.66-26.39-7.33l5.84-25.02c.49-2.09-.81-4.18-2.89-4.67-2.09-.49-4.17.81-4.66,2.9l-5.96,25.55c-8.79-1.18-17.69-1.61-26.62-1.27l-2.87-26.22c-.23-2.13-2.14-3.67-4.27-3.44-2.13.23-3.66,2.15-3.43,4.29l2.83,25.89c-8.5.76-16.99,2.21-25.39,4.43l-21.41-81.52c23.6-6.22,47.69-8.64,71.46-7.52l-1.87,27.25c-.15,2.14,1.47,4,3.6,4.14.09,0,.18,0,.27,0,2.02,0,3.72-1.57,3.86-3.62l1.87-27.29c23.53,1.87,46.66,7.21,68.59,15.76ZM135.25,108.25l4.14,28.96c.28,1.94,1.93,3.33,3.83,3.33.18,0,.37-.01.56-.04,2.12-.31,3.59-2.27,3.29-4.4l-4.14-28.93c12.42-1.62,24.88-2.65,37.36-3.1l.91,27.93c.07,2.1,1.79,3.76,3.87,3.76.04,0,.09,0,.13,0,2.14-.07,3.82-1.87,3.75-4.01l-.91-27.88c12.23-.21,24.45.15,36.64,1.06l-6.71,83.85c-14.95-1.06-30.06-1.07-45.22.01l-2.33-29.33c-.17-2.14-2.02-3.74-4.17-3.57-2.13.17-3.72,2.04-3.56,4.18l2.33,29.37c-15.77,1.52-31.57,4.21-47.28,8.13l-20.24-81.84c12.5-3.11,25.1-5.6,37.76-7.5Zm54.75,491.75c-55.23,0-100-44.77-100-100,0-55.23,44.77-100,100-100,55.23,0,100,44.77,100,100,0,55.23-44.77,100-100,100Zm67.3-242.16l32.55-77.64c31.86,13.62,60.94,34.14,84.69,60.77l-65.22,53.4c-14.84-15.83-32.62-28.16-52.01-36.54Zm75.77,69.89l22.46-11.64c1.9-.99,2.65-3.33,1.66-5.24-.98-1.91-3.32-2.65-5.22-1.67l-22.69,11.76c-4.23-7.14-9.05-13.98-14.45-20.4-.11-.13-.22-.25-.33-.37l65.11-53.31c16.19,19.42,29.02,41.21,38.24,64.37l-28.81,10.31c-2.02.72-3.07,2.94-2.35,4.97.57,1.59,2.06,2.58,3.65,2.58.43,0,.87-.07,1.3-.23l28.96-10.36c3.76,10.39,6.81,21.03,9.11,31.83l-82.99,13.62c-3.03-12.56-7.61-24.74-13.65-36.22Zm96.32,124.66v.08s-81.98-18.36-81.98-18.36c4.63-20.73,4.82-42.04.95-62.55l82.85-13.6c5.58,31,5.15,63.15-1.81,94.43Zm32.31-216.98c-8.5-13.69-18.14-26.8-28.9-39.18-5.58-6.42-11.38-12.57-17.38-18.45l59-60.05c7.54,7.4,14.8,15.1,21.75,23.12,7.42,8.53,14.4,17.34,20.98,26.38l-20.59,14.39c-1.17.71-1.99,1.85-2.25,3.15-.27,1.31.05,2.68.84,3.72l13.58,18.56-47.02,28.38Zm4.01,6.65l72.04-43.47c16.06,27.27,28.63,56.24,37.54,86.21l-24.53,7.47c-2.49-8.83-4.72-16.26-8.04-25.06-.76-2.01-2.99-3.02-4.99-2.26-2,.76-3.01,3-2.25,5.01,3.23,8.57,5.42,15.87,7.87,24.58l-17.99,5.48c-2.35-7.94-4.98-15.85-7.9-23.58-.76-2.01-3-3.02-5-2.26-2,.76-3.01,3-2.25,5.01,2.86,7.57,5.44,15.32,7.74,23.09l-23.07,7.03c-6.91-23.37-16.67-45.96-29.14-67.25Zm54.32,67.7c2.27,8.41,4.23,16.97,5.82,25.52.35,1.87,1.98,3.17,3.81,3.17.24,0,.47-.02.72-.07,2.1-.39,3.49-2.42,3.1-4.53-1.64-8.82-3.68-17.67-6.02-26.35l49.97-15.22c8.74,31.71,13.41,64.48,13.82,97.49l-25.19.18c-.17-9.73-.7-19.52-1.62-29.14-.21-2.14-2.11-3.7-4.23-3.49-2.13.21-3.69,2.11-3.48,4.24.9,9.4,1.42,18.96,1.59,28.45l-51.12.37c-.35-24.89-3.8-49.61-10.23-73.58l23.07-7.03Zm59.28,179.89h-.08l-23.61-6.09c2.19-8.93,4.07-18.05,5.57-27.13.35-2.12-1.08-4.12-3.19-4.47-2.11-.35-4.11,1.08-4.46,3.2-1.47,8.86-3.3,17.75-5.43,26.47l-50.25-12.97c5.97-23.29,9.04-46.95,9.32-70.5l24.25-.18c-.04,7.93-.35,15.92-.95,23.79-.16,2.14,1.44,4.01,3.57,4.17.1,0,.2.01.3.01,2.01,0,3.71-1.55,3.86-3.59.61-8.08.93-16.29.97-24.43l52.08-.38c-.24,30.76-4.17,61.69-11.96,92.12Z'></path><path fill='%23534e57' fill-opacity='0.22' d='m408.19,503.7h-.03l-29.1.23c-2.14.02-3.86,1.77-3.85,3.92.02,2.14,1.75,3.86,3.87,3.86h.03l29.1-.23c2.14-.02,3.86-1.77,3.85-3.92-.02-2.14-1.75-3.86-3.87-3.86Z'></path><path fill='%23534e57' fill-opacity='0.22' d='m320.24,324.34c-1.77-1.21-4.18-.75-5.39,1.02l-17.24,25.37c-1.21,1.77-.75,4.19,1.02,5.4.67.46,1.43.68,2.18.68,1.24,0,2.46-.59,3.21-1.7l17.24-25.36c1.21-1.77.75-4.19-1.02-5.4Z'></path><path fill='%23534e57' fill-opacity='0.22' d='m322.97,169.62c.44.16.88.23,1.32.23,1.58,0,3.07-.98,3.64-2.56l6-16.57c.73-2.02-.31-4.25-2.32-4.98-2.01-.73-4.24.31-4.97,2.33l-6,16.57c-.73,2.02.31,4.25,2.32,4.98Z'></path></svg>");
    color: #FFFFFF;
  }
}
#main p {
  margin: 1rem;
}
/*    |"|
     _|_|_
     (o o)  List Module
==ooO=(_)=Ooo===================================*/
dl {
  padding: 0;
  margin-left: 1em;
}
dd {
  margin: 0 0 .3em 1em;
}
dt {
  margin-top: 10px;
  padding-left: 1.5em;
  background-color: #f1f0f0;
  background-image: url(../images/tmp_side_ico_01.png);
  background-repeat: no-repeat;
  background-position: left;
}
ol {
  counter-reset: number;
  list-style-type: none;
  margin: 1rem;
}
ol li {
  position: relative;
  padding-left: 1.8rem;
  line-height: 3rem;
}
ol li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  background: #6471A7;
  color: white;
  font-family: 'Avenir', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 0.8rem;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  top: 0.9rem;
  left: 0.3rem;
  text-align: center;
}
#toc ol {
  counter-reset: counter;
  list-style-type: none;
}
#toc li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}
#main ul li {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  list-style-image: url(../../assets/side_icon_01.png);
}
#main ul li ul li {
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 20px;
  list-style-image: url(../../assets/side_icon_02.png);
}
/*  (_)-(_)
     (o o)  particles
==ooO=(_)=Ooo===================================*/
#particles-js {
  height: 432px;
  width: 768px;
  margin: 0 auto;
  margin-top: 2px;
  display: block;
  position: relative;
  background-color: #000026;
}
/*  (_)-(_)
     (o o)  maintop
==ooO=(_)=Ooo===================================*/
#maintop {
  padding-top: 50px;
}
#maintop a img {
  transition: opacity 0.3s ease-out;
}
#maintop .top_icon {
  margin-bottom: 50px;
  display: block;
}
#maintop .top_icon img {
  margin-top: -5px;
  margin-bottom: -5px;
  opacity: 0.88;
}
#maintop .top_icon a img {
  transition: opacity 0.3s ease-out;
}
#maintop .top_icon a:hover img {
  opacity: 1.0;
}
.top-img {
  display: flex;
  justify-content: center;
}
.bx-pager img {
  width: 100%;
}
/*  (_)-(_)
     (o o)  shopping icon
==ooO=(_)=Ooo===================================*/
.button_shop {
  margin: 20px auto;
  width: 80px;
  height: 80px;
  padding-top: 7px;
  padding-left: 5px;
  border-radius: 80px;
  border: 2px solid #2F9693;
  /*	background-color: #F2F5F5;*/
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.1);
  background-color: white;
}
.button_shop:hover {
  width: 220px;
  height: 80px;
  border-radius: 80px;
  box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.3);
}
.button_shop:active {
  box-shadow: none;
  cursor: pointer;
}
.button_shop img {
  width: 70px;
  hight: 70px;
  max-width: 70px;
  vertical-align: middle;
}
.buttontext_shop {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  color: #2C8E8B;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  font-feature-settings: normal;
}
/*  (_)-(_)
     (o o)  button home
==ooO=(_)=Ooo===================================*/
.button_home_base {
  overflow: hidden;
  border-radius: 1rem;
  border: 2px solid var(--gold);
  border-top-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.button_home_base a {
  display: inline-block;
  width: 100%;
  height: 200px;
  text-decoration: none;
  color: #E6E6E5;
  position: relative;
  transition: opacity 3s ease-in-out;
  text-align: center;
  font-size: clamp(14px, 1vw, 24px);
  border-radius: 1rem;
}
.button_home_base:hover {
  filter: brightness(1.5);
}
.button_home_base:hover .button_home_text {
  opacity: 1.0;
  color: var(--lightorange);
}
.button_home_base:hover .button_home_icon img {
  animation: button-home-icon 2s ease-in-out infinite alternate;
}
.button_home_base:hover .button_home_logo img {
  animation: button-home-logo 2s ease-in-out infinite alternate;
}
.button_home_base:active {
  cursor: pointer;
  box-shadow: none;
}
.button_home_logo img {
  width: 150px;
  height: 150px;
  transition: opacity 3s ease-in-out;
  opacity: 0.25;
  position: absolute;
  animation: button-home-logo2 15s ease-in-out infinite alternate;
}
.button_home_icon img {
  width: 130px;
  height: 130px;
  margin-top: 20px;
  filter: drop-shadow(5px 5px 5px #231815);
  animation: button-home-icon2 2s ease-in-out infinite alternate;
}
.button_home_text {
  font-family: 'Raleway', 'M PLUS 1p', "sans-serif";
  font-size: 1.1rem;
  animation: button-home-text 2s ease-in-out infinite alternate;
}
.button-home1 {
  background: linear-gradient(hsla(319, 60%, 20%, 1.0), hsla(319, 60%, 10%, 1.00));
}
.button-home2 {
  background: linear-gradient(hsla(314, 60%, 20%, 1.0), hsla(314, 60%, 10%, 1.00));
}
.button-home3 {
  background: linear-gradient(hsla(309, 60%, 20%, 1.0), hsla(309, 60%, 10%, 1.00));
}
.button-home4 {
  background: linear-gradient(hsla(301, 60%, 20%, 1.0), hsla(301, 60%, 10%, 1.00));
}
.button-home5 {
  background: linear-gradient(hsla(291, 60%, 20%, 1.0), hsla(291, 60%, 10%, 1.00));
}
.button-home6 {
  background: linear-gradient(hsla(280, 60%, 20%, 1.0), hsla(280, 60%, 10%, 1.00));
}
.button-home7 {
  background: linear-gradient(hsla(267, 60%, 20%, 1.0), hsla(267, 60%, 10%, 1.00));
}
.button-home8 {
  background: linear-gradient(hsla(240, 60%, 20%, 1.0), hsla(240, 60%, 10%, 1.00));
}
/*
.button-home1 {
  background: linear-gradient(hsla(240, 100%, 30%, 0.70), hsla(240, 51%, 20%, 0.70));
}
.button-home2 {
  background: linear-gradient(hsl(289 100% 30%), hsl(289 50% 20%));
  opacity: 0.7;
}
.button-home3 {
  background: linear-gradient(hsl(315 100% 30%), hsl(315 50% 20%));
  opacity: 0.7;
}
.button-home4 {
  background: linear-gradient(hsl(329 100% 30%), hsl(329 50% 20%));
  opacity: 0.7;
}
.button-home5 {
  background: linear-gradient(hsl(337 100% 20%), hsl(337 50% 20%));
  opacity: 0.7;
}
.button-home6 {
  background: linear-gradient(hsl(357 100% 59%), hsl(357 50% 59%));
  opacity: 0.7;
}
.button-home7 {
  background: linear-gradient(hsl(17 100% 59%), hsl(17 50% 59%));
  opacity: 0.7;
}
.button-home8 {
  background: linear-gradient(hsla(34 100% 53%), hsl(34 50% 53%));
  opacity: 0.7;
}
*/
@-webkit-keyframes button-home-logo {
  0% {}
  100% {
    transform: translate(-75px, 10px) scale(0.56);
    opacity: 1.0;
  }
}
@-webkit-keyframes button-home-logo2 {
  0% {
    transform: translate(calc(0% - 200px), 55px) scale(1.0);
    opacity: 0.4;
  }
  100% {
    transform: translate(-100px, 5px) scale(1.0);
    opacity: 0.2;
  }
}
@-webkit-keyframes button-home-icon {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
  }
}
@-webkit-keyframes button-home-icon2 {
  0% {
    transform: rotate(-3deg) scale(1.0);
  }
  100% {
    transform: rotate(3deg) scale(0.95);
  }
}
@-webkit-keyframes button-home-text {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(0.95);
  }
}
/*  (_)-(_)
     (o o)  buy icon
==ooO=(_)=Ooo===================================*/
#buy {
  width: 140px;
  margin: auto;
}
#buy img {
  opacity: 1.0;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#buy a:hover img {
  opacity: 0.85;
}
#buy a img {
  transition: opacity 0.3s ease-out;
}
#buy img:active {
  box-shadow: none;
}
/*  (_)-(_)
     (o o)  footer
==ooO=(_)=Ooo===================================*/
footer {
  clear: both;
  color: #E6E6E6;
  background: linear-gradient(-45deg, #42163B 25%, #762B50 25%, #762B50 50%, #42163B 50%, #42163B 75%, #762B50 75%, #762B50);
  opacity: 0.6;
  background-size: 4px 5px;
  border-top: 2px solid #D95D94;
  position: relative;
}
footer a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  color: #CDC2AE;
  transition: color 200ms;
  text-decoration: none;
}
footer a:hover {
  color: #EAE6DE;
  transition: color 300ms;
}
.footer-spikes {
  padding: 10px;
  background: radial-gradient(at center, #373737, #373737 6.25vh, transparent 6.25vh);
  background-size: 12vh 12vh;
}
/*  (_)-(_)
     (o o)  topicPath
==ooO=(_)=Ooo===================================*/
.topicPath {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  margin: 1rem 1rem 0 1rem;
  text-align: left;
}
.topicPath a {
  color: #A69EAF;
}
.topicPath a:hover {
  color: #CDC2AE;
}
.topicPath li {
  display: inline;
  list-style: none;
}
/*  (_)-(_)
     (o o)  Local search
==ooO=(_)=Ooo===================================*/
.localSearch {
  margin: 1rem;
}
.localSearch .search-field {
  width: 180px;
  height: 32px;
  margin-left: 3px;
  border-radius: 15px;
  text-indent: 15px;
  font-size: 15px;
  border-top: solid 2px #751B43;
  border-left: solid 2px #751B43;
  border-right: solid 2px #D95D94;
  border-bottom: solid 2px #D95D94;
}
.localSearch .sbtn {
  display: none;
}
.localSearch form {
  text-align: center;
}
.localSearch form input {
  background: white;
  border: 0px;
  appearance: none;
}
/*  (_)-(_)
     (o o)  footer-list
==ooO=(_)=Ooo===================================*/
.footer-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
@media (max-width : 679px) {
  .footer-list::after {
    display: block;
    content: "";
    width: 200px;
  }
}
.footer-col {
  width: 200px;
}
@media (max-width : 399px) {
  .footer-list::after {
    display: none;
  }
}
.footer-col ul {
  list-style-type: none;
}
.footer-col li {
  margin-left: 30px;
}
/*  (_)-(_)
     (o o)  share-button
==ooO=(_)=Ooo===================================*/
#share-button {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 10px;
  display: block;
}
#share-button div {
  margin-left: 10px;
  float: right;
}
/*  (_)-(_)
     (o o)  sns-button
==ooO=(_)=Ooo===================================*/
.sns_box {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 10px;
  display: block;
}
.sns_button {
  display: inline-block;
  margin-left: 10px;
  box-shadow: inset 0 0 0 2px #C5C5C5;
  border-radius: 100%;
  transition: all 280ms ease;
}
.sns_button a {
  display: table-cell;
  width: 44px;
  height: 44px;
  color: #C5C5C5;
  font-feature-settings: normal;
  text-align: center;
  vertical-align: middle;
  transition: all 280ms ease;
}
.sns_button i {
  font-size: 30px;
  vertical-align: middle;
}
.sns_button:hover {
  box-shadow: inset 0 0 0 22px #fff;
}
.twitter:hover a {
  color: #1B95E0;
}
.facebook:hover a {
  color: #3B5999;
}
.google:hover a {
  color: #dd4b39;
}
.instagram:hover a {
  color: #2b5c84;
}
.pocket:hover a {
  color: #EE4056;
}
/*  (_)-(_)
     (o o)  lang-selector
==ooO=(_)=Ooo===================================*/
#lang-selector {
  display: block;
}
#lang-selector a {
  color: #FFFFFF;
}
#lang-selector ul {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 250px;
  float: left;
}
#lang-selector ul li {
  margin-right: 15px;
  margin-left: 0px;
  text-decoration: none;
  display: inline;
}
/*  (_)-(_)
     (o o)  footer-logo
==ooO=(_)=Ooo===================================*/
.footer-logo {
  text-align: center;
}
.footer-logo img {
  max-width: 150px;
}
.footer-logo a:hover img {
  filter: hue-rotate(360deg);
  transition: all 10s;
}
/*  (_)-(_)
     (o o)  footer-copyright
==ooO=(_)=Ooo===================================*/
.footer-copyright {
  text-align: center;
  padding-bottom: 1rem;
  font-size: 0.8rem;
}
/*  (_)-(_)
     (o o)  .bxslider figure
==ooO=(_)=Ooo===================================*/
.bxslider {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  float: left;
  overflow: hidden;
}
.bxslider figure figcaption {
  color: #FFFFFF;
  top: -1px;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  -webkit-transition: .4s;
  transition: all .4s easeInOutSine;
  opacity: 0;
}
/*  (_)-(_)
     (o o)  figure
==ooO=(_)=Ooo===================================*/
figure figcaption {}
.top_products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  grid-template-rows: 1fr;
  background: rgba(196, 196, 196, 1.00);
  padding: 3px;
}
.top_products figure {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin: 4px;
  filter: drop-shadow(2px 2px 5px #5A5A5A);
  border: 1px solid rgba(91, 91, 91, 1.00);
}
.top_products figcaption {
  overflow: hidden;
  color: #FFFFFF;
  position: absolute;
  top: -100%;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: rgba(0, 0, 0, .5);
  -webkit-transition: .5s;
  transition: all .5s easeInOutSine;
  opacity: 1;
}
.top_products figure:hover figcaption {
  top: 0;
  left: 0;
  height: 263px;
}
.top_products figure figcaption p {
  font-size: 95%;
  line-height: 1.5;
  padding-top: 0px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
}
.top_products figure figcaption a {
  color: #87EAF0;
}
.top_products figure .products-top-img {
  -webkit-transition: 0.8s;
  transition: all 0.8s easeInOutSine;
}
.top_products figure:hover .products-top-img {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: 1.0s;
  transition: all 1.0s easeInOutSine;
}
#app_list figure {
  min-width: 256px;
  position: relative;
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
}
#app_list figcaption {
  color: #FFFFFF;
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: rgba(0, 0, 0, .6);
  -webkit-transition: .5s;
  transition: all .5s easeInOutSine;
  opacity: 1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#app_list figure:hover figcaption {
  top: 0;
  left: 0;
}
#app_list figure figcaption h3 {
  background-color: #88004C;
  color: #CDC2AE;
  text-align: center;
}
#app_list figure img {
  margin-top: -20px;
  margin-bottom: 20px;
  -webkit-transform: rotate(0deg) scale(0.8);
  transform: rotate(0deg) scale(0.8);
  -webkit-transition: .8s;
  transition: all .8s easeInOutSine;
}
#app_list figure:hover img {
  -webkit-transform: rotate(25deg) scale(1.25);
  transform: rotate(25deg) scale(1.25);
  -webkit-transition: 1.0s;
  transition: all 1.0s easeInOutSine;
}
/*  (_)-(_)
     (o o)  multi-rows
==ooO=(_)=Ooo===================================*/
.multi-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  text-align: center;
}
/*
@media (max-width : 767px) {
  .multi-rows::after {
    display: block;
    content: "";
    width: 250px;
  }
}
*/
.multi-rows-title {
  color: #854C65;
  font-size: 110%;
  padding: 5px 10px;
  margin: 5px;
  border-top: solid 2px #854C65;
  border-bottom: solid 2px #854C65;
  text-align: center;
}
.multi-rows-txt {
  margin: 1rem;
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  .multi-rows-txt {
    color: #F0E4FF;
  }
}
.item-2rows, .item-3rows {
  overflow: hidden;
  border: solid 1px #021189;
  background-color: rgba(248, 241, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' width='60' height='60'%3E%3Cpath fill='%23e6daf1' fill-opacity='0.54' d='M52.8,38.15c-0.012-2.881,1.564-5.534,4.1-6.9v-5.6c-3.811-2.125-5.178-6.936-3.053-10.747c0.714-1.281,1.772-2.338,3.053-3.053v-4c0-4-3.9-7.7-8-7.7h-3.6c-1.956,3.838-6.652,5.365-10.491,3.409C33.341,2.811,32.148,1.618,31.4,0.15h-5.5c-1.956,3.838-6.652,5.365-10.491,3.409C13.941,2.811,12.748,1.618,12,0.15H8c-4.418,0-8,3.582-8,8v3.6c3.866,1.9,5.459,6.575,3.559,10.441C2.799,23.738,1.547,24.99,0,25.75v5.4c3.866,1.9,5.459,6.575,3.559,10.441C2.799,43.138,1.547,44.39,0,45.15v3.6c0,4.418,3.582,8,8,8h4c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h5.5c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h3.5c4.1,0,8-3.7,8-7.7v-4C54.318,43.641,52.789,41.004,52.8,38.15z M15.8,49.75c-4.584,0-8.3-3.716-8.3-8.3c0-4.584,3.716-8.3,8.3-8.3c4.584,0,8.3,3.716,8.3,8.3l0,0C24.1,46.034,20.385,49.75,15.8,49.75c-0.033,0.001-0.066,0-0.1,0L15.8,49.75z M35.4,45.45l-6.8-1.4c1.493-6.91-2.898-13.722-9.808-15.215c-1.946-0.421-3.964-0.381-5.892,0.115l-1.8-6.7c10.514-2.798,21.306,3.457,24.104,13.971c0.812,3.049,0.879,6.249,0.196,9.329V45.45z M47.8,48.55l-6.8-1.7c2.006-7.9-0.014-16.282-5.4-22.4c-6.447-7.386-16.499-10.518-26-8.1L8,9.65c5.9-1.476,12.092-1.303,17.9,0.5c5.765,1.8,10.921,5.157,14.9,9.7c6.901,7.839,9.484,18.581,6.9,28.7L47.8,48.55z M116.85,4.1c-2.881,0.012-5.534-1.564-6.9-4.1h-5.6c-2.125,3.811-6.936,5.178-10.747,3.053C92.322,2.338,91.264,1.281,90.55,0h-4c-4,0-7.7,3.9-7.7,8v3.6c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409V31c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v4c0,4.418,3.582,8,8,8h3.6c1.9-3.866,6.575-5.459,10.441-3.559c1.547,0.76,2.799,2.012,3.559,3.559h5.4c1.9-3.866,6.575-5.459,10.441-3.559c1.547,0.76,2.799,2.012,3.559,3.559h3.6c4.418,0,8-3.582,8-8v-4c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-5.5c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409V8.1c0-4.1-3.7-8-7.7-8h-4C122.341,2.582,119.704,4.111,116.85,4.1z M128.45,41.1c0,4.584-3.716,8.3-8.3,8.3c-4.584,0-8.3-3.716-8.3-8.3s3.716-8.3,8.3-8.3l0,0C124.734,32.8,128.45,36.515,128.45,41.1c0.001,0.033,0,0.066,0,0.1V41.1z M124.15,21.5l-1.4,6.8c-6.91-1.493-13.722,2.898-15.215,9.808c-0.421,1.946-0.381,3.964,0.115,5.892l-6.7,1.8c-2.798-10.514,3.457-21.306,13.971-24.104c3.049-0.812,6.249-0.879,9.329-0.196H124.15z M127.25,9.1l-1.7,6.8c-7.9-2.006-16.282,0.014-22.4,5.4c-7.386,6.447-10.518,16.499-8.1,26l-6.7,1.6c-1.476-5.9-1.303-12.092,0.5-17.9c1.8-5.765,5.157-10.921,9.7-14.9c7.839-6.901,18.581-9.484,28.7-6.9V9.1z M18.9,125.954c2.881-0.012,5.534,1.564,6.9,4.1h5.6c2.125-3.811,6.936-5.178,10.747-3.053c1.281,0.714,2.338,1.772,3.053,3.053h4c4,0,7.7-3.9,7.7-8v-3.6c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-5.5c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-4c0-4.418-3.582-8-8-8h-3.6c-1.9,3.866-6.575,5.459-10.441,3.559c-1.547-0.76-2.799-2.012-3.559-3.559h-5.4c-1.9,3.866-6.575,5.459-10.441,3.559c-1.547-0.76-2.799-2.012-3.559-3.559H8.3c-4.418,0-8,3.582-8,8v4c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v5.5c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v3.5c0,4.1,3.7,8,7.7,8h4C13.409,127.473,16.046,125.943,18.9,125.954z M7.3,88.954c0-4.584,3.716-8.3,8.3-8.3s8.3,3.716,8.3,8.3c0,4.584-3.716,8.3-8.3,8.3l0,0C11.016,97.255,7.3,93.539,7.3,88.954c-0.001-0.033,0-0.066,0-0.1L7.3,88.954z M11.6,108.554l1.4-6.8c6.91,1.493,13.722-2.898,15.215-9.808c0.421-1.946,0.381-3.964-0.115-5.892l6.7-1.8c2.798,10.514-3.457,21.306-13.971,24.104c-3.049,0.812-6.249,0.879-9.329,0.196H11.6zM8.5,120.954l1.7-6.8c7.9,2.006,16.282-0.014,22.4-5.4c7.386-6.447,10.518-16.499,8.1-26l6.7-1.6c1.476,5.9,1.303,12.092-0.5,17.9c-1.8,5.765-5.157,10.921-9.7,14.9c-7.839,6.901-18.581,9.484-28.7,6.9L8.5,120.954z M83.25,91.904c0.012,2.881-1.564,5.534-4.1,6.9v5.6c3.811,2.125,5.178,6.936,3.053,10.747c-0.714,1.281-1.772,2.339-3.053,3.053v4c0,4,3.9,7.7,8,7.7h3.6c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h5.5c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h4c4.418,0,8-3.582,8-8v-3.6c-3.866-1.9-5.459-6.575-3.559-10.441c0.76-1.547,2.012-2.799,3.559-3.559v-5.4c-3.866-1.9-5.459-6.575-3.559-10.441c0.76-1.547,2.012-2.799,3.559-3.559v-3.6c0-4.418-3.582-8-8-8h-4c-1.956,3.838-6.652,5.365-10.491,3.409c-1.468-0.748-2.661-1.941-3.409-3.409h-5.5c-1.956,3.838-6.652,5.365-10.491,3.409c-1.468-0.748-2.661-1.941-3.409-3.409h-3.5c-4.1,0-8,3.7-8,7.7v4C81.732,86.413,83.261,89.051,83.25,91.904z M120.25,80.304c4.584,0,8.3,3.716,8.3,8.3c0,4.584-3.716,8.3-8.3,8.3c-4.584,0-8.3-3.716-8.3-8.3l0,0C111.95,84.02,115.665,80.304,120.25,80.304c0.033-0.001,0.066,0,0.1,0H120.25z M100.65,84.604l6.8,1.4c-1.493,6.91,2.898,13.722,9.808,15.215c1.946,0.421,3.964,0.381,5.892-0.115l1.8,6.7c-10.514,2.798-21.306-3.457-24.104-13.971c-0.812-3.049-0.879-6.249-0.196-9.329V84.604z M88.25,81.504l6.8,1.7c-2.006,7.9,0.014,16.282,5.4,22.4c6.447,7.386,16.499,10.518,26,8.1l1.6,6.7c-5.9,1.476-12.092,1.303-17.9-0.5c-5.765-1.8-10.921-5.157-14.9-9.7c-6.901-7.839-9.484-18.581-6.9-28.7L88.25,81.504z'%3E%3C/path%3E%3C/svg%3E");
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 20px;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .item-2rows, .item-3rows {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' width='60' height='60'%3E%3Cpath fill='%236f00e5' fill-opacity='0.2' d='M52.8,38.15c-0.012-2.881,1.564-5.534,4.1-6.9v-5.6c-3.811-2.125-5.178-6.936-3.053-10.747c0.714-1.281,1.772-2.338,3.053-3.053v-4c0-4-3.9-7.7-8-7.7h-3.6c-1.956,3.838-6.652,5.365-10.491,3.409C33.341,2.811,32.148,1.618,31.4,0.15h-5.5c-1.956,3.838-6.652,5.365-10.491,3.409C13.941,2.811,12.748,1.618,12,0.15H8c-4.418,0-8,3.582-8,8v3.6c3.866,1.9,5.459,6.575,3.559,10.441C2.799,23.738,1.547,24.99,0,25.75v5.4c3.866,1.9,5.459,6.575,3.559,10.441C2.799,43.138,1.547,44.39,0,45.15v3.6c0,4.418,3.582,8,8,8h4c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h5.5c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h3.5c4.1,0,8-3.7,8-7.7v-4C54.318,43.641,52.789,41.004,52.8,38.15z M15.8,49.75c-4.584,0-8.3-3.716-8.3-8.3c0-4.584,3.716-8.3,8.3-8.3c4.584,0,8.3,3.716,8.3,8.3l0,0C24.1,46.034,20.385,49.75,15.8,49.75c-0.033,0.001-0.066,0-0.1,0L15.8,49.75z M35.4,45.45l-6.8-1.4c1.493-6.91-2.898-13.722-9.808-15.215c-1.946-0.421-3.964-0.381-5.892,0.115l-1.8-6.7c10.514-2.798,21.306,3.457,24.104,13.971c0.812,3.049,0.879,6.249,0.196,9.329V45.45z M47.8,48.55l-6.8-1.7c2.006-7.9-0.014-16.282-5.4-22.4c-6.447-7.386-16.499-10.518-26-8.1L8,9.65c5.9-1.476,12.092-1.303,17.9,0.5c5.765,1.8,10.921,5.157,14.9,9.7c6.901,7.839,9.484,18.581,6.9,28.7L47.8,48.55z M116.85,4.1c-2.881,0.012-5.534-1.564-6.9-4.1h-5.6c-2.125,3.811-6.936,5.178-10.747,3.053C92.322,2.338,91.264,1.281,90.55,0h-4c-4,0-7.7,3.9-7.7,8v3.6c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409V31c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v4c0,4.418,3.582,8,8,8h3.6c1.9-3.866,6.575-5.459,10.441-3.559c1.547,0.76,2.799,2.012,3.559,3.559h5.4c1.9-3.866,6.575-5.459,10.441-3.559c1.547,0.76,2.799,2.012,3.559,3.559h3.6c4.418,0,8-3.582,8-8v-4c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-5.5c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409V8.1c0-4.1-3.7-8-7.7-8h-4C122.341,2.582,119.704,4.111,116.85,4.1z M128.45,41.1c0,4.584-3.716,8.3-8.3,8.3c-4.584,0-8.3-3.716-8.3-8.3s3.716-8.3,8.3-8.3l0,0C124.734,32.8,128.45,36.515,128.45,41.1c0.001,0.033,0,0.066,0,0.1V41.1z M124.15,21.5l-1.4,6.8c-6.91-1.493-13.722,2.898-15.215,9.808c-0.421,1.946-0.381,3.964,0.115,5.892l-6.7,1.8c-2.798-10.514,3.457-21.306,13.971-24.104c3.049-0.812,6.249-0.879,9.329-0.196H124.15z M127.25,9.1l-1.7,6.8c-7.9-2.006-16.282,0.014-22.4,5.4c-7.386,6.447-10.518,16.499-8.1,26l-6.7,1.6c-1.476-5.9-1.303-12.092,0.5-17.9c1.8-5.765,5.157-10.921,9.7-14.9c7.839-6.901,18.581-9.484,28.7-6.9V9.1z M18.9,125.954c2.881-0.012,5.534,1.564,6.9,4.1h5.6c2.125-3.811,6.936-5.178,10.747-3.053c1.281,0.714,2.338,1.772,3.053,3.053h4c4,0,7.7-3.9,7.7-8v-3.6c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-5.5c-3.838-1.956-5.365-6.652-3.409-10.491c0.748-1.468,1.941-2.661,3.409-3.409v-4c0-4.418-3.582-8-8-8h-3.6c-1.9,3.866-6.575,5.459-10.441,3.559c-1.547-0.76-2.799-2.012-3.559-3.559h-5.4c-1.9,3.866-6.575,5.459-10.441,3.559c-1.547-0.76-2.799-2.012-3.559-3.559H8.3c-4.418,0-8,3.582-8,8v4c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v5.5c3.838,1.956,5.365,6.652,3.409,10.491c-0.748,1.468-1.941,2.661-3.409,3.409v3.5c0,4.1,3.7,8,7.7,8h4C13.409,127.473,16.046,125.943,18.9,125.954z M7.3,88.954c0-4.584,3.716-8.3,8.3-8.3s8.3,3.716,8.3,8.3c0,4.584-3.716,8.3-8.3,8.3l0,0C11.016,97.255,7.3,93.539,7.3,88.954c-0.001-0.033,0-0.066,0-0.1L7.3,88.954z M11.6,108.554l1.4-6.8c6.91,1.493,13.722-2.898,15.215-9.808c0.421-1.946,0.381-3.964-0.115-5.892l6.7-1.8c2.798,10.514-3.457,21.306-13.971,24.104c-3.049,0.812-6.249,0.879-9.329,0.196H11.6zM8.5,120.954l1.7-6.8c7.9,2.006,16.282-0.014,22.4-5.4c7.386-6.447,10.518-16.499,8.1-26l6.7-1.6c1.476,5.9,1.303,12.092-0.5,17.9c-1.8,5.765-5.157,10.921-9.7,14.9c-7.839,6.901-18.581,9.484-28.7,6.9L8.5,120.954z M83.25,91.904c0.012,2.881-1.564,5.534-4.1,6.9v5.6c3.811,2.125,5.178,6.936,3.053,10.747c-0.714,1.281-1.772,2.339-3.053,3.053v4c0,4,3.9,7.7,8,7.7h3.6c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h5.5c1.956-3.838,6.652-5.365,10.491-3.409c1.468,0.748,2.661,1.941,3.409,3.409h4c4.418,0,8-3.582,8-8v-3.6c-3.866-1.9-5.459-6.575-3.559-10.441c0.76-1.547,2.012-2.799,3.559-3.559v-5.4c-3.866-1.9-5.459-6.575-3.559-10.441c0.76-1.547,2.012-2.799,3.559-3.559v-3.6c0-4.418-3.582-8-8-8h-4c-1.956,3.838-6.652,5.365-10.491,3.409c-1.468-0.748-2.661-1.941-3.409-3.409h-5.5c-1.956,3.838-6.652,5.365-10.491,3.409c-1.468-0.748-2.661-1.941-3.409-3.409h-3.5c-4.1,0-8,3.7-8,7.7v4C81.732,86.413,83.261,89.051,83.25,91.904z M120.25,80.304c4.584,0,8.3,3.716,8.3,8.3c0,4.584-3.716,8.3-8.3,8.3c-4.584,0-8.3-3.716-8.3-8.3l0,0C111.95,84.02,115.665,80.304,120.25,80.304c0.033-0.001,0.066,0,0.1,0H120.25z M100.65,84.604l6.8,1.4c-1.493,6.91,2.898,13.722,9.808,15.215c1.946,0.421,3.964,0.381,5.892-0.115l1.8,6.7c-10.514,2.798-21.306-3.457-24.104-13.971c-0.812-3.049-0.879-6.249-0.196-9.329V84.604z M88.25,81.504l6.8,1.7c-2.006,7.9,0.014,16.282,5.4,22.4c6.447,7.386,16.499,10.518,26,8.1l1.6,6.7c-5.9,1.476-12.092,1.303-17.9-0.5c-5.765-1.8-10.921-5.157-14.9-9.7c-6.901-7.839-9.484-18.581-6.9-28.7L88.25,81.504z'%3E%3C/path%3E%3C/svg%3E");
    color: #F0E4FF;
  }
}
.item-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 320px;
  margin: 20px 20px;
  border: 1px solid #C514EB;
  border-radius: 25px;
  box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, 0.5);
  transform: perspective(5000px) rotateX(0deg) rotateY(0deg) rotateZ(-2deg);
  transition: box-shadow 0.5s, transform 0.5s;
}
.item-card:hover {
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.5);
  transform: perspective(5000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
@media (prefers-color-scheme: dark) {
  .item-card {
    box-shadow: 10px 10px 20px 1px rgba(253, 247, 214, 0.20);
  }
  .item-card:hover {
    box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.5);
  }
}
.card-header {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  text-align: center;
  background: linear-gradient(120deg, rgba(83, 35, 117, 1.00), rgba(43, 18, 61, 1.00), rgba(83, 35, 117, 1.00));
  color: rgba(247, 241, 251, 1.00);
  font-size: 130%;
  padding-top: 8px;
  padding-bottom: 9px;
  line-height: 1;
}
.card-header span {
  display: block;
  font-size: 65%;
  color: #E1E1E1;
}
.card-header::before {
  position: absolute;
  content: attr(title)"";
  font-size: 65%;
  color: #E1E1E1;
}
.card-txt {
  padding: 20px;
  text-align: justify;
  color: #F1EADA;
  text-shadow: 1px 1px 3px #6E5626;
}
.item-2rows {
  width: 320px;
  margin: 20px;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
}
.item-3rows {
  width: 250px;
  margin: 6px 3px;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.item-2rows-transparent {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #A1A1A1;
  border-radius: 6px;
  margin: 20px;
  text-align: center;
}
.item-2rows-transparent img {
  border-radius: 6px;
}
.item-2rows img, .item-3rows img, .item-card img {
  width: 100%;
  height: auto;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  /* [disabled]border-top-right-radius: 8px; */
  /* [disabled]border-top-left-radius: 8px; */
}
.item-img-icon {
  max-width: 130px;
  height: auto;
  margin: 20px auto;
}
.item-img-icon-2 {
  max-width: 130px;
  height: auto;
  margin: 50px auto 90px auto;
}
.item-img-app-icon {
  width: 256px;
  height: auto;
  margin: 10px auto;
}
.multi-rows h3 {
  text-align: center;
}
/* Header */
.blue-header {
  text-align: center;
  background: rgba(0, 37, 72, 1.00);
  background: linear-gradient(120deg, rgba(0, 63, 123, 1.00) 0%, rgba(0, 37, 72, 1.00) 100%);
  color: rgba(220, 227, 255, 1.00);
  padding: 3px;
}
.red-header {
  text-align: center;
  background: linear-gradient(120deg, rgba(128, 0, 0, 1.00) 0%, rgba(150, 0, 0, 1.00) 100%);
  color: rgba(252, 238, 238, 1.00);
  padding: 3px;
}
.purple-header {
  text-align: center;
  background: linear-gradient(120deg, rgba(84, 35, 119, 1.00), rgba(48, 19, 67, 1.00), rgba(86, 36, 121, 1.00));
  color: rgba(247, 241, 251, 1.00);
  padding: 3px;
}
.purple-header span {
  display: block;
  font-size: 80%;
  color: #E1E1E1;
}
.purple-header::before {
  position: absolute;
  content: attr(title)"";
  font-size: 120%;
  color: #E1E1E1;
}
.gray-header {
  text-align: center;
  background: linear-gradient(90deg, rgba(83, 35, 117, 1.00), rgba(43, 18, 61, 1.00), rgba(83, 35, 117, 1.00));
  color: rgba(247, 241, 251, 1.00);
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 100%;
  line-height: 0.9;
}
.gray-header span {
  display: block;
  font-size: 65%;
  color: #E1E1E1;
}
.gray-header::before {
  position: absolute;
  content: attr(title)"";
  font-size: 65%;
  color: #E1E1E1;
}
/*  (_)-(_)
     (o o)  multi-cols
==ooO=(_)=Ooo===================================*/
.multi-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.multi-row-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.multi-cols h3 {
  text-align: center;
}
.product-cols img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.multi-cols-btn {
  margin-top: auto;
  /* [disabled]padding-top: 10px; */
}
.four-cols figure {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: -7px;
  padding: 1px;
  width: 25%;
  position: relative;
  float: left;
  overflow: hidden;
}
.grid-logo {
  display: flex;
  justify-content: center;
}
.logo-box {
  display: grid;
  place-items: center;
  width: 192px;
  height: 192px;
  background-color: whitesmoke;
}
.logo-box img {
  width: 50%;
  height: 50%;
}
/*  (_)-(_)
     (o o)  product-item1
==ooO=(_)=Ooo===================================*/
.product-item1 {
  background-image: linear-gradient(-45deg, #F3E7FF 25%, #F8F1FF 25%, #F8F1FF 50%, #F3E7FF 50%, #F3E7FF 75%, #F8F1FF 75%, #F8F1FF);
  background-size: 6px 6px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0em;
  border: 1px solid #A1A1A1;
  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 8px;
  text-align: center;
}
.product-item1 img {
  width: 378px;
}
/*  (_)-(_)
     (o o)  product-item2
==ooO=(_)=Ooo===================================*/
.product-item2 {
  background-image: linear-gradient(-45deg, #F3E7FF 25%, #F8F1FF 25%, #F8F1FF 50%, #F3E7FF 50%, #F3E7FF 75%, #F8F1FF 75%, #F8F1FF);
  background-size: 6px 6px;
  display: flex;
  flex-direction: column;
  width: 380px;
  padding: 0em;
  border: 1px solid #A1A1A1;
  border-radius: 3px;
  box-sizing: border-box;
  margin-bottom: 8px;
  text-align: center;
}
.product-item2 p {
  font-size: 100%;
  text-align: left;
}
.product-item2-img img {
  max-width: 240px;
  height: auto;
  margin: 30px auto;
  filter: drop-shadow(3px 3px 3px #231815);
}
.product-item2-img {
  width: 100%;
  text-align: center;
  background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(28, 0, 140, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(7, 0, 47, 0.60) 120%);
  background-blend-mode: multiply;
  border-radius: 8px 8px 0px 0px;
  height: 300px;
}
.product-item2-video video {
  border-radius: 8px 8px 0px 0px;
}
.product-item2-hero img {
  margin-left: 0px;
}
/*  (_)-(_)
     (o o)  product-item3
==ooO=(_)=Ooo===================================*/
.product-item {
  background-image: linear-gradient(-45deg, #F3E7FF 25%, #F8F1FF 25%, #F8F1FF 50%, #F3E7FF 50%, #F3E7FF 75%, #F8F1FF 75%, #F8F1FF);
  background-size: 6px 6px;
  display: flex;
  flex-direction: column;
  width: 252px;
  padding: 0em;
  border: 1px solid #A1A1A1;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}
.product-item p {
  font-size: 100%;
  text-align: justify;
}
.product-item-img img, .product-item-img-b img, .product-item-img-r img, .product-item-img-y img, .product-item-img-g img, .product-item-img-o img {
  max-width: 200px;
  height: 200px;
  margin: 10px auto;
  filter: drop-shadow(5px 5px 10px #231815);
}
.product-item-img {
  width: 100%;
  text-align: center;
  background-image: radial-gradient(circle 1600px at -70% -20%, rgba(222, 222, 222, 0.7) 0%, rgba(24, 44, 146, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
.product-item-img-y {
  width: 100%;
  text-align: center;
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 136, 117, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
.product-item-img-g {
  width: 100%;
  text-align: center;
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(117, 162, 160, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
.product-item-img-r {
  width: 100%;
  text-align: center;
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 117, 139, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
.product-item-img-b {
  width: 100%;
  text-align: center;
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(117, 118, 162, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
.product-item-img-o {
  width: 100%;
  text-align: center;
  background: linear-gradient(-30deg, rgba(3, 1, 31, 1) 0%, rgba(162, 161, 117, 0.7) 100%);
  border-radius: 8px 8px 0px 0px;
}
/*  (_)-(_)
     (o o)  capability-cols
==ooO=(_)=Ooo===================================*/
.capability-item {
  background: linear-gradient(to bottom, #739DAC 0%, #588695 80%);
  display: flex;
  flex-direction: column;
  width: 252px;
  padding: 0em;
  border: 1px solid #A1A1A1;
  border-radius: 3px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}
.capability-item-img {
  min-height: 0%;
  margin-top: 0em;
  margin-bottom: 0em;
  background: linear-gradient(-30deg, rgba(151, 151, 198, 1.00) 0%, rgba(137, 179, 232, 1.00) 100%);
}
@media (prefers-color-scheme: dark) {
  .capability-item-img {
    background: linear-gradient(-30deg, rgba(87, 107, 112, 0.5) 0%, rgba(107, 121, 124, 0.5) 100%);
  }
}
.capability-item-img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.capability-item img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.capability-item-title {
  color: #532375;
  font-size: 100%;
  text-align: center;
  margin-top: 10px;
}
@media (prefers-color-scheme: dark) {
  .capability-item-title {
    color: #DFC9EE;
  }
}
.capability-item p {
  text-align: left;
  color: #DFE7EC;
  font-size: 100%;
  margin: 2em auto;
}
.capability-item a {
  color: #F8F7F7;
}
.capability-item a:hover {
  color: #FFDB6F;
}
/*  (_)-(_)
     (o o)  divided-row
==ooO=(_)=Ooo===================================*/
.divided-row {
  display: flex;
  flex-wrap: wrap;
}
.divided-row:nth-child(odd) {
  flex-direction: row-reverse;
}
.divided-row-img {
  width: 100%;
  height: 320px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid #543C94;
  background: rgba(230, 230, 230, 0.8);
}
.divided-row-img img {}
.divided-row-text {
  display: grid;
  place-items: center;
}
/*  (_)-(_)
     (o o)  product-list
==ooO=(_)=Ooo===================================*/
.simple-list img {
  margin-right: 30px;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  max-width: 40px;
}
.photo-list img {
  margin: 20px;
  width: 70px;
  height: 70px;
  max-width: 70px;
}
.standard-list img {
  margin: 20px;
  width: 100px;
  height: 100px;
  max-width: 100px;
}
/*  (_)-(_)
     (o o)  list-selector
==ooO=(_)=Ooo===================================*/
.list-selector ul {
  margin: 10px;
  float: right;
}
.list-selector ul li {
  margin-left: 5px;
  text-decoration: none;
  display: inline;
}
#main .list-selector ul li a {
  color: dimgrey;
  text-decoration: none;
  display: inline;
}
#main .list-selector ul li a.active {
  color: darkblue;
}
#main .list-selector ul li a:hover:active {
  cursor: default;
}
#main .list-selector ul li a:hover:not(.active) {
  color: coral;
}
/*  (_)-(_)
     (o o)  pagination
==ooO=(_)=Ooo===================================*/
.pagination {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(177, 177, 177, 0.5);
}
.pagination a {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', "游ゴシック", "Yu Gothic", "sans-serif";
  color: #216D6B;
  background: rgba(246, 246, 246, 1.00);
  line-height: 1;
  padding: 6px;
  margin: 3px;
  border-radius: 1rem;
  text-align: center;
  font-size: 80%;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #2F9693;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.1);
}
.pagination a.active {
  background-color: #2F9693;
  color: white;
  border: 1px solid rgba(246, 246, 246, 1.00);
  cursor: default;
  box-shadow: none;
}
.pagination a:hover:not(.active) {
  color: #fff;
  border: 1px solid rgba(246, 246, 246, 1.00);
  box-shadow: 0 0 40px 40px #2F9693 inset;
  transition: box-shadow 500ms ease-in-out, color 300ms ease-in-out;
}
/*  (_)-(_)
     (o o)  gallery-page
==ooO=(_)=Ooo===================================*/
#gallery-photos {
  overflow: hidden;
}
#gallery-photos img {
  margin-right: 2px;
  margin-bottom: 2px;
  /*width: 49%;*/
  float: left;
  overflow: hidden;
}
.center {
  text-align: center;
}
.gallery-pagination {
  display: inline-block;
  margin: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.gallery-pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #E3CCD9; /*margin: 0 4px;*/
}
.gallery-pagination a.active {
  background-color: #990066;
  color: white;
  border: 1px solid #990066;
}
.gallery-pagination a:hover:not(.active) {
  background-color: #E3CCD9;
}
#gallery-page {
  text-align: center;
  overflow: hidden;
  margin: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#gallery-page ul {
  list-style: none;
  /*	text-align: center;*/
  overflow: hidden;
  margin: 0px;
}
#gallery-page li a {
  color: black;
  padding: 5px;
  padding-left: 7px;
  padding-right: 7px;
  margin: 0px;
  vertical-align: middle;
  border: 1px solid #990066;
  background-color: gainsboro;
  text-decoration: none;
}
#gallery-page li a:hover {
  color: coral;
  text-decoration: underline;
}
#gallery-page li {
  color: crimson;
  display: inline-block;
  width: auto;
  margin: 5px;
}
/*  (_)-(_)
     (o o)  Print
==ooO=(_)=Ooo===================================*/
@media print {
  body {
    background: none;
  }
  #main {
    width: auto;
    background: none;
  }
  .globalNav {
    display: none;
  }
  #localNavigation-upper {
    display: none;
  }
  #side {
    display: none;
  }
  header {
    display: none;
  }
  #globalNavigation {
    display: none;
  }
  #header-inner img {
    visibility: hidden;
  }
  #header-inner table {
    /* display: none; */
  }
  #google_translate_element {
    display: none;
  }
  #footer ul {
    display: none;
  }
  .pagination {
    display: none;
  }
  #secondary {
    display: none;
  }
  .localSearch {
    display: none;
  }
  footer {
    display: none;
  }
  .footer-inner {
    display: none;
  }
  #sideWrap {
    display: none;
  }
}
/*  (_)-(_)
     (o o)  404 error
==ooO=(_)=Ooo===================================*/
#404_error {
  display: block;
  position: relative;
  width: 100%;
  padding: 50px;
  margin: 50px;
}
/*  (_)-(_)
     (o o)  power vs speed anime
==ooO=(_)=Ooo===================================*/
.power-speed-stage {
  position: relative;
  background: transparent;
  overflow: hidden;
}
.power-speed-base {
  width: 320px;
  height: 250px;
  -webkit-animation: power-speed-anime 6s linear alternate infinite;
}
.power-speed-weight1 {
  width: 77px;
  height: 77px;
  border-radius: 10px;
  background-color: rgb(126, 138, 102);
  color: #ffffff;
  text-align: center;
  line-height: 75px;
  position: absolute;
  top: 50px;
  left: 20px;
}
.power-speed-weight2 {
  width: 77px;
  height: 77px;
  border-radius: 10px;
  background-color: rgb(179, 137, 108);
  color: #ffffff;
  text-align: center;
  line-height: 75px;
  position: absolute;
  top: 50px;
  left: 225px;
}
.power-speed-balance {
  width: 300px;
  height: 14px;
  background-color: rgb(85, 114, 124);
  position: absolute;
  top: 125px;
  left: 10px;
}
.power-speed-support {
  width: 0;
  height: 0;
  border-top: 62px solid transparent;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 62px solid rgb(85, 114, 124);
  position: absolute;
  top: 77px;
  left: 130px;
}
@-webkit-keyframes power-speed-anime {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
/*  (_)-(_)
     (o o)  app-twelite anime
==ooO=(_)=Ooo===================================*/
.app-twelite-stage {
  width: 320px;
  height: 320px;
  margin: 20px auto;
  position: relative;
  border: 1px solid #DC9E31;
  border-radius: 6px;
  background-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(166, 57, 106, 1.0) 0%, rgba(99, 6, 60, 1.0) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0.5) 90%);
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.app-twelite-stage img {
  filter: drop-shadow(5px 5px 5px #231815);
}
.app-twelite-sync {
  position: absolute;
  top: 80px;
  left: 110px;
  -webkit-animation: app-twelite-sync 15s linear infinite;
}
.app-twelite-sw-on {
  position: absolute;
  top: 210px;
  left: 0px;
  -webkit-animation: app-twelite-sw-on 5s linear infinite;
}
.app-twelite-sw-off {
  position: absolute;
  top: 210px;
  left: 0px;
  -webkit-animation: app-twelite-sw-off 5s linear infinite;
}
.app-twelite-led-on {
  position: absolute;
  top: 220px;
  left: 225px;
  -webkit-animation: app-twelite-led-on 5s linear infinite;
  -webkit-animation-delay: 0.5s;
}
.app-twelite-led-off {
  position: absolute;
  top: 220px;
  left: 225px;
}
.app-twelite-sw-on2 {
  position: absolute;
  top: 5px;
  left: 220px;
  -webkit-animation: app-twelite-sw-on 22s linear infinite;
}
.app-twelite-sw-off2 {
  position: absolute;
  top: 5px;
  left: 220px;
  -webkit-animation: app-twelite-sw-off 22s linear infinite;
}
.app-twelite-led-on2 {
  position: absolute;
  top: 15px;
  left: 5px;
  -webkit-animation: app-twelite-led-on 22s linear infinite;
  -webkit-animation-delay: 0.5s;
}
.app-twelite-led-off2 {
  position: absolute;
  top: 15px;
  left: 5px;
}
.app-twelite-volume {
  position: absolute;
  top: 210px;
  left: 0px;
  -webkit-animation: app-twelite-volume 6s linear alternate infinite;
}
.app-twelite-led-volume {
  position: absolute;
  top: 220px;
  left: 225px;
  -webkit-animation: app-twelite-led-volume 6s linear alternate infinite;
}
.app-twelite-led-volume-off {
  position: absolute;
  top: 220px;
  left: 225px;
}
.app-twelite-volume2 {
  position: absolute;
  top: 5px;
  left: 220px;
  -webkit-animation: app-twelite-volume 22s linear alternate infinite;
}
.app-twelite-led-volume2 {
  position: absolute;
  top: 15px;
  left: 5px;
  -webkit-animation: app-twelite-led-volume 22s linear alternate infinite;
}
.app-twelite-led-volume2-off {
  position: absolute;
  top: 15px;
  left: 5px;
}
@-webkit-keyframes app-twelite-sync {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes app-twelite-sw-on {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1.0;
  }
  50% {
    opacity: 1.0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes app-twelite-sw-off {
  0% {
    opacity: 1.0;
  }
  1% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes app-twelite-led-on {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1.0;
  }
  50% {
    opacity: 1.0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes app-twelite-led-off {
  0% {
    opacity: 1.0;
  }
  1% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes app-twelite-volume {
  0% {
    transform: rotate(-120deg);
  }
  5% {
    transform: rotate(-120deg);
  }
  95% {
    transform: rotate(130deg);
  }
  100% {
    transform: rotate(130deg);
  }
}
@-webkit-keyframes app-twelite-led-volume {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  95% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
/*  (_)-(_)
     (o o)  swing anime
==ooO=(_)=Ooo===================================*/
#swing li {
  display: inline-block;
  float: left;
  -webkit-animation: horizontal 0.5s ease-in-out infinite alternate;
}
#swing a {
  text-decoration: none;
  display: block;
  margin-top: -3px;
  margin-left: -335px;
  text-align: center;
  -webkit-animation: vertical 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes horizontal {
  0% {
    -webkit-transform: translateX(-3px);
  }
  25% {
    -webkit-transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}
/*  (_)-(_)
     (o o)  irc pal anime
==ooO=(_)=Ooo===================================*/
.animestage-pal-irc {
  width: 320px;
  height: 320px;
  margin: 0px;
  position: relative;
  background: #FBE8BC;
}
.animestage-pal-irc p {
  color: purple;
  font-size: 11px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: 183px;
  left: 93px;
}
.pal-irc-sw-on {
  position: absolute;
  top: 210px;
  left: 0px;
  -webkit-animation: ani-pal-irc-on 6s linear alternate infinite;
}
.pal-irc-sw-off {
  position: absolute;
  top: 210px;
  left: 0px;
  -webkit-animation: ani-pal-irc-off 6s linear alternate infinite;
}
.RF-anime-irc {
  width: 450px;
  height: 450px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: RFscaleout4 6s ease-in-out 3s normal infinite;
  position: absolute;
  top: 43px;
  left: -173px;
}
@keyframes RFscaleout4 {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
.pal-irc-on-bright {
  position: absolute;
  top: 20px;
  left: 20px;
  -webkit-animation: ani-pal-irc-on-bright 6s linear 3s alternate infinite;
}
.pal-irc-on {
  position: absolute;
  top: 20px;
  left: 20px;
  -webkit-animation: ani-pal-irc-on 6s linear 3s alternate infinite;
}
.pal-irc-off {
  position: absolute;
  top: 20px;
  left: 20px;
  -webkit-animation: ani-pal-irc-off 6s linear 3s alternate infinite;
}
@-webkit-keyframes ani-pal-irc-on-bright {
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ani-pal-irc-on {
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0;
  }
  53% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes ani-pal-irc-off {
  0% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  mag pal anime
==ooO=(_)=Ooo===================================*/
.animestage-pal {
  width: 320px;
  height: 320px;
  margin: 0px;
  position: relative;
  background: #FBE8BC;
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.animestage-pal p {
  color: purple;
  font-size: 11px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: -20px;
  left: 100px;
}
.mag-anime {
  animation: maganime 6.0s ease-in-out infinite;
  position: absolute;
  top: 150px;
  left: 150px;
  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
}
.magnet {
  width: 70px;
  height: 30px;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: 40px;
  left: 41px;
}
.pal {
  width: 60px;
  height: 140px;
  color: white;
  position: absolute;
  top: 70px;
  left: 130px;
}
.pal2 {
  width: 50px;
  height: 120px;
  color: white;
  position: absolute;
  top: 40px;
  left: 135px;
}
@-webkit-keyframes maganime {
  0% {
    -webkit-transform: translateX(40px);
  }
  20% {
    -webkit-transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(0px);
  }
  75% {
    -webkit-transform: translateX(40px);
  }
  100% {
    -webkit-transform: translateX(40px);
  }
}
.RF-anime3 {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: RFscaleout3 3.0s infinite ease-in-out;
  animation-delay: 0.3s;
  position: absolute;
  top: -20px;
  left: -40px;
}
@keyframes RFscaleout3 {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
.pal-mag-open {
  position: absolute;
  top: 220px;
  left: 20px;
  -webkit-animation: ani-pal-mag-open 3s 0.3s linear alternate infinite;
}
.pal-mag-close {
  position: absolute;
  top: 220px;
  left: 20px;
  -webkit-animation: ani-pal-mag-close 3s 0.3s linear alternate infinite;
}
@-webkit-keyframes ani-pal-mag-close {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 1.0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ani-pal-mag-open {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
/*  (_)-(_)
     (o o)  mag cue anime
==ooO=(_)=Ooo===================================*/
.animestage-cue {
  perspective: 1200;
  perspective-origin: -50% -50%;
  width: 344px;
  height: 344px;
  margin: 0px auto;
  position: relative;
  background-image: url("../../jp/products/twelite-cue/cue-background.png");
  background-size: contain;
  filter: drop-shadow(1px 1px 2px #231815);
}
.animestage-aria {
  perspective: 1200;
  perspective-origin: -50% -50%;
  width: 344px;
  height: 344px;
  margin: 0px auto;
  position: relative;
  background-image: url("../../jp/products/twelite-aria/aria-background.png");
  background-size: contain;
  filter: drop-shadow(1px 1px 0px #231815);
}
.animestage-cue p {
  color: purple;
  font-size: 11px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: -20px;
  left: 100px;
}
.cue-mag-anime {
  animation: cue-maganime 6.0s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 150px;
  left: 150px;
}
.cue-mag-ota-anime {
  animation: cue-ota-maganime 6.0s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 150px;
  left: 250px;
}
.cue-led-ota-anime {
  animation: cue-ota-ledanime 6.0s ease-in-out infinite;
}
.cue-magnet {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: darkgray;
  border: solid 1px rgba(80, 80, 80, 1.00);
  color: rgba(64, 64, 64, 1.00);
  font-size: 12px;
  text-align: center;
  line-height: 45px;
  font-weight: bold;
  position: absolute;
  top: 100px;
  left: -130px;
}
.cue-led {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 40% 50% 40% 25%;
  background: radial-gradient(rgba(255, 144, 0, 1.00) 0%, rgba(255, 144, 0, 0.9) 5%, rgba(255, 175, 72, 0.1) 100%);
  color: rgba(64, 64, 64, 1.00);
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  position: absolute;
  top: 240px;
  left: 133px;
}
.aria-led {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 40% 50% 40% 25%;
  background: radial-gradient(rgba(0, 155, 255, 1.00) 0%, rgba(0, 180, 255, 0.90) 5%, rgba(151, 237, 255, 0.50) 100%);
  color: rgba(64, 64, 64, 1.00);
  font-size: 12px;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  position: absolute;
  top: 240px;
  left: 133px;
}
.cue {
  width: 120px;
  height: 120px;
  color: transparent;
  position: absolute;
  top: 160px;
  left: 130px;
}
.cue-caption {
  width: 80px;
  height: 30px;
  color: rgba(70, 105, 159, 1.00);
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: 260px;
  left: 130px;
}
@-webkit-keyframes cue-maganime {
  0% {
    transform: translateX(62px);
  }
  20% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(0px);
  }
  75% {
    transform: translateX(62px);
  }
  100% {
    transform: translateX(62px);
  }
}
@-webkit-keyframes cue-ota-maganime {
  0% {
    transform: translateY(-100px);
  }
  5% {
    transform: translateY(0px);
  }
  10% {
    transform: translateY(-100px);
  }
  15% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-100px);
  }
  25% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-100px);
  }
  35% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-100px);
  }
  45% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-105px);
  }
  55% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(-100px);
  }
}
@-webkit-keyframes cue-ota-ledanime {
  0% {
    opacity: 0;
  }
  56% {
    opacity: 0;
  }
  60% {
    opacity: 1.0;
  }
  64% {
    opacity: 0;
  }
  68% {
    opacity: 1.0;
  }
  72% {
    opacity: 0;
  }
  76% {
    opacity: 1.0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.cue-RF-anime {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  background-color: rgba(251, 225, 255, 0.30);
  border-radius: 100%;
  animation: cue-RFscaleout 3.0s infinite ease-in-out;
  animation-delay: 0.2s;
  position: absolute;
  top: -140px;
  left: -140px;
}
.cue-RF-anime2 {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  background-color: rgba(251, 225, 255, 0.30);
  border-radius: 100%;
  animation: cue-RFscaleout 1.5s infinite ease-in-out;
  animation-delay: 0.2s;
  position: absolute;
  top: -140px;
  left: -140px;
}
@keyframes cue-RFscaleout {
  0% {
    transform: scale(0.0);
  }
  80% {
    transform: scale(1.0);
    opacity: 0;
  }
  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}
.cue-mag-open {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: ani-cue-mag-open 3s 0.3s linear alternate infinite;
}
.cue-mag-close {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: ani-cue-mag-close 3s 0.3s linear alternate infinite;
}
@-webkit-keyframes ani-cue-mag-close {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 1.0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes ani-cue-mag-open {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
#mag-front {
  background-color: rgba(214, 214, 214, 1.00);
  transform: translateZ(15px);
}
#cue-led-front {
  background-color: rgba(255, 165, 71, 0.80);
  transform: translateZ(15px);
}
.cue-mot-0 {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: mot-0 15s linear infinite;
}
.cue-mot-x {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: mot-x 15s linear infinite;
}
.cue-mot-y {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: mot-y 15s linear infinite;
}
.cue-mot-z {
  position: absolute;
  top: 25px;
  left: 60px;
  animation: mot-z 15s linear infinite;
}
.cue-dice-anime {
  animation: cuediceanime 24s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 230px;
  left: 170px;
}
.cue-dice-wall {
  width: 120px;
  height: 120px;
  color: white;
  position: absolute;
  top: -60px;
  left: -60px;
}
.cue-dice-sidehwall {
  width: 130px;
  height: 120px;
  color: white;
  position: absolute;
  top: -60px;
  left: -90px;
}
.cue-dice-sidevwall {
  width: 120px;
  height: 120px;
  color: white;
  position: absolute;
  top: -90px;
  left: -60px;
}
#cue-dice-front {
  background-color: rgba(255, 255, 255, 0);
  transform: translateZ(29px);
}
#cue-dice-back {
  background-color: rgba(255, 255, 255, 0);
  transform: rotateY(180deg) translateZ(29px);
}
#cue-dice-left {
  background-color: rgba(255, 255, 255, 0);
  transform: rotateX(-90deg) rotateY(-90deg) translateZ(35px) translateX(5px);
}
#cue-dice-right {
  background-color: rgba(255, 255, 255, 0);
  transform: rotateX(-90deg) rotateY(90deg) translateZ(85px) translateX(-5px);
}
#cue-dice-top {
  background-color: rgba(255, 255, 255, 0);
  transform: rotateX(-90deg) translateZ(-30px) translateY(0px) translateZ(5px);
}
#cue-dice-bottom {
  background-color: rgba(255, 255, 255, 0);
  transform: rotateX(-90deg) translateZ(100px) translateY(0px) translateZ(-5px);
}
@keyframes cuediceanime {
  0% {
    transform: rotate(0deg);
  }
  1% {
    transform: rotate(90deg);
  }
  12.5% {
    transform: rotate(90deg);
  }
  13.5% {
    transform: rotate(180deg);
  }
  25% {
    transform: rotate(180deg);
  }
  26% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(270deg);
  }
  38.5% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  51% {
    transform: rotateX(90deg);
  }
  62.5% {
    transform: rotateX(90deg);
  }
  63.5% {
    transform: rotateX(180deg);
  }
  75% {
    transform: rotateX(180deg);
  }
  76% {
    transform: rotateX(270deg);
  }
  87.5% {
    transform: rotateX(270deg);
  }
  88.5% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.dice-anime-1 {
  animation: diceanime-1 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
.dice-anime-2 {
  animation: diceanime-2 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
.dice-anime-3 {
  animation: diceanime-3 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
.dice-anime-4 {
  animation: diceanime-4 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
.dice-anime-5 {
  animation: diceanime-5 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
.dice-anime-6 {
  animation: diceanime-6 24s ease infinite;
  position: absolute;
  top: 25px;
  left: 60px;
}
@keyframes diceanime-2 {
  0% {
    opacity: 1;
  }
  2% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  38.5% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  52% {
    opacity: 0;
  }
  76% {
    opacity: 0;
  }
  88.5% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes diceanime-3 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  14.5% {
    opacity: 0;
  }
  38.5% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  63.5% {
    opacity: 0;
  }
  76% {
    opacity: 0;
  }
  88.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes diceanime-5 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  63.5% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  77% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes diceanime-4 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
  }
  39.5% {
    opacity: 0;
  }
  53% {
    opacity: 0;
  }
  76% {
    opacity: 0;
  }
  88.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes diceanime-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  38.5% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  62.5% {
    opacity: 1;
  }
  64.5% {
    opacity: 0;
  }
  88.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes diceanime-6 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0;
  }
  13.5% {
    opacity: 0;
  }
  26% {
    opacity: 0;
  }
  38.5% {
    opacity: 0;
  }
  51% {
    opacity: 0;
  }
  63.5% {
    opacity: 0;
  }
  76% {
    opacity: 0;
  }
  87.5% {
    opacity: 1;
  }
  89.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  swing anime
==ooO=(_)=Ooo===================================*/
.SWING-anime {
  animation: SWINGanime 1.2s ease-in-out infinite;
  position: absolute;
  top: 150px;
  left: 150px;
  transform: rotateX(90deg);
}
.SWING {
  width: 200px;
  height: 200px;
  position: absolute;
  top: -90px;
  left: -90px;
  z-index: 100;
}
#swing-front {
  background-color: rgba(0, 0, 0, 0);
}
@-webkit-keyframes SWINGanime {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*  (_)-(_)
     (o o)  logo anime
==ooO=(_)=Ooo===================================*/
.logo-anime-stage {
  -webkit-perspective: 7000;
  width: 320px;
  height: 320px;
  margin: 0px;
  position: relative;
  background-color: #2D0019;
}
.logo-anime {
  animation: logo-anime 18s ease-in-out infinite;
  animation-delay: 2s;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 165px;
  left: 125px;
}
.logo-wall {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  top: 11px;
  left: -39px;
}
.lgog-sidevwall {
  width: 180px;
  height: 60px;
  position: absolute;
  top: 26px;
  left: -39px;
}
.logo-sidehwall {
  width: 60px;
  height: 180px;
  position: absolute;
  top: 26px;
  left: -39px;
}
.logo-basewall {
  width: 200px;
  height: 200px;
  border-radius: 5px;
  position: absolute;
  top: -105px;
  left: -65px;
}
#logo-top {
  background-color: #2D0019;
  transform: translateZ(90px);
}
#logo-mid {
  background-color: rgba(45, 0, 25, 0.6);
  -webkit-transform: rotateY(180deg) translateZ(-1px);
}
#logo-bottom {
  background-color: #2D0019;
  -webkit-transform: rotateY(180deg) translateZ(90px);
}
#logo-left {
  background-color: rgba(228, 0, 127, 1.0);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
}
#logo-front {
  color: rgba(228, 0, 127, 1.0);
  font-size: 16px;
  padding-top: 15px;
  padding-left: 5px;
  line-height: 1.1em;
  font-weight: bold;
  background-color: #2D0019;
  -webkit-transform: rotateX(-90deg) translateZ(-75px);
}
#logo-front img {
  margin-top: 25px;
}
#logo-base {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(-90px);
}
@keyframes logo-anime {
  0% {
    transform: rotateX(0deg);
  }
  12% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(90deg);
  }
  70% {
    transform: rotateX(90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
.cue-mot-anime {
  animation: cuemotanime 15s ease-in-out infinite;
  transform-style: preserve-3d;
  position: absolute;
  top: 180px;
  left: 50px;
}
@keyframes cuemotanime {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(150px, 0px);
  }
  20% {
    transform: translate(140px, 0px);
  }
  30% {
    transform: translate(140px, 0px);
  }
  40% {
    transform: translate(140px, -140px);
  }
  50% {
    transform: translate(140px, 10px);
  }
  60% {
    transform: translate(140px, 0px);
  }
  70% {
    transform: scale(1.5);
  }
  90% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.0);
  }
}
.cue-tap-anime {
  animation: cuetapanime 3s ease-in-out infinite;
  transform-style: preserve-3d;
  position: absolute;
  top: 160px;
  left: 110px;
}
@keyframes cuetapanime {
  0% {}
  7% {
    transform: scale(1.0);
  }
  10% {
    transform: scale(0.85);
  }
  13% {
    transform: scale(1.1);
  }
  15% {
    transform: scale(1.0);
  }
  50% {}
  60% {}
  70% {}
  90% {}
  100% {}
}
.tap-finger {
  position: absolute;
  top: 170px;
  left: 120px;
  animation: tapfinger 3s linear infinite;
}
@-webkit-keyframes tapfinger {
  0% {
    opacity: 1.0;
    transform: scale(1.05);
  }
  5% {
    transform: scale(1.05);
  }
  7% {
    transform: scale(0.90);
  }
  9% {
    transform: scale(1.05);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.notice-bell-anime {
  animation: noticebellanime 3s ease-in-out infinite;
  transform-style: preserve-3d;
  position: absolute;
  top: 25px;
  left: 60px;
}
@keyframes noticebellanime {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.cue-shake-anime {
  animation: cueshakeanime 3s ease-in-out infinite;
  transform-style: preserve-3d;
  position: absolute;
  top: 160px;
  left: 110px;
}
@keyframes cueshakeanime {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(-30px);
  }
  10% {
    transform: translateX(30px);
  }
  15% {
    transform: translateX(-30px);
  }
  20% {
    transform: translateX(30px);
  }
  25% {
    transform: translateX(0px);
  }
  40% {}
  50% {}
  60% {}
  70% {}
  90% {}
  100% {}
}
/*  (_)-(_)
     (o o)  pal anime
==ooO=(_)=Ooo===================================*/
.animestage {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 320px;
  height: 320px;
  margin: 20px;
  background-color: rgba(206, 213, 237, 0.5);
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.animestage p {
  color: #3A2C92;
  padding-top: 10px;
  text-align: center;
}
.TWELITE-pal-anime {
  animation: TWELITEpalanime 15s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 100px;
  left: 160px;
}
.pal-wall {
  width: 50px;
  height: 140px;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -20px;
  left: -35px;
}
.pal-wall-b {
  width: 50px;
  height: 140px;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -60px;
  left: -30px;
}
.pal-sidehwall {
  width: 30px;
  height: 140px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -50px;
}
.pal-sidevwall {
  width: 50px;
  height: 30px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  position: absolute;
  top: -65px;
  left: -35px;
}
#pal-front {
  background-color: rgba(0, 0, 0, 0);
  transform: translateZ(15px);
}
#pal-back {
  background-color: rgba(0, 0, 0, 1.0);
  transform: translateZ(15px);
}
#pal-left {
  background-color: rgba(80, 80, 255, 0);
  transform: rotateY(-90deg) translateZ(0px);
}
#pal-right {
  background-color: rgba(80, 80, 255, 0);
  transform: rotateY(90deg) translateZ(0px);
}
#pal-top {
  background-color: rgba(80, 80, 255, 0);
  transform: rotateX(90deg) translateZ(0px);
}
#pal-bottom {
  background-color: rgba(80, 80, 255, 0);
  transform: rotateX(-90deg) translateZ(0px);
}
@keyframes TWELITEpalanime {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(70px);
  }
  20% {
    transform: translateY(-10px);
  }
  30% {
    transform: translateY(0);
  }
  40% {
    transform: translateX(-70px);
  }
  50% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(0);
  }
  70% {
    transform: scale(0.6);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}
.pal-mot-0 {
  position: absolute;
  top: 220px;
  left: 20px;
  animation: mot-0 15s linear infinite;
}
.pal-mot-x {
  position: absolute;
  top: 220px;
  left: 20px;
  animation: mot-x 15s linear infinite;
}
.pal-mot-y {
  position: absolute;
  top: 220px;
  left: 20px;
  animation: mot-y 15s linear infinite;
}
.pal-mot-z {
  position: absolute;
  top: 220px;
  left: 20px;
  animation: mot-z 15s linear infinite;
}
@-webkit-keyframes mot-0 {
  0% {
    opacity: 1.0;
  }
  25% {
    opacity: 1.0;
  }
  26% {
    opacity: 1.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes mot-x {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0;
  }
  5% {
    opacity: 1.0;
  }
  10% {
    opacity: 1.0;
  }
  15% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes mot-y {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: 1.0;
  }
  46% {
    opacity: 1.0;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes mot-z {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  64% {
    opacity: 0;
  }
  65% {
    opacity: 1.0;
  }
  70% {
    opacity: 1.0;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  2525 anime
==ooO=(_)=Ooo===================================*/
.animestage {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 320px;
  height: 320px;
  margin: 20px;
  position: relative;
  background: #F4F5F0;
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.animestage p {
  color: #3A2C92;
  padding-top: 10px;
  text-align: center;
}
.TWELITE2525-anime {
  animation: TWELITE2525anime1 30s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 160px;
  left: 160px;
}
.wall {
  width: 100px;
  height: 100px;
  color: white;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -50px;
}
.sidehwall {
  width: 30px;
  height: 100px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -65px;
}
.sidevwall {
  width: 100px;
  height: 30px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  position: absolute;
  top: -65px;
  left: -50px;
}
#front {
  background-color: rgba(0, 0, 0, 1.0);
  -webkit-transform: translateZ(15px);
}
#back {
  background-color: rgba(0, 0, 255, 1.0);
  -webkit-transform: rotateY(180deg) translateZ(15px);
}
#left {
  background-color: rgba(80, 80, 255, 0.8);
  -webkit-transform: rotateY(-90deg) translateZ(0px);
}
#right {
  background-color: rgba(80, 80, 255, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(100px);
}
#top {
  background-color: rgba(80, 80, 255, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(0px);
}
#bottom {
  background-color: rgba(80, 80, 255, 0.8);
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}
@keyframes TWELITE2525anime1 {
  0% {
    -webkit-transform: translateY(0);
  }
  5% {
    -webkit-transform: translateY(-50px);
  }
  10% {
    -webkit-transform: translateY(90px);
  }
  20% {
    -webkit-transform: translateY(0);
  }
  25% {
    transform: translateX(-30px);
  }
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(70px);
  }
  38% {
    transform: translateX(0);
  }
  40% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.7);
  }
  55% {
    transform: scale(1.0);
  }
  60% {
    transform: rotate(-45deg);
  }
  65% {
    transform: rotate(180deg);
  }
  70% {
    transform: rotate(360deg);
  }
  75% {
    transform: rotateY(-20deg);
  }
  80% {
    transform: rotateY(180deg);
  }
  85% {
    transform: rotateX(0deg);
  }
  90% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
/*  (_)-(_)
     (o o)  beacon anime
==ooO=(_)=Ooo===================================*/
.beacon-anime {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: rgba(254, 219, 255, 0.30);
  border-radius: 100%;
  animation: scaleout 1.5s infinite ease-in-out;
  position: absolute;
  top: -245px;
  left: -250px;
}
@keyframes scaleout {
  0% {
    transform: rotateX(90deg) scale(0.0);
    -webkit-transform: rotateX(90deg) scale(0.0);
  }
  100% {
    transform: rotateX(90deg) scale(1.0);
    -webkit-transform: rotateX(90deg) scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  beacon anime
==ooO=(_)=Ooo===================================*/
.BP01-beacon-anime2 {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 200px;
  height: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: scaleout2 1.5s infinite ease-in-out;
  position: absolute;
  top: -250px;
  left: -100px;
}
@keyframes scaleout2 {
  0% {
    transform: rotateX(90deg) scale(0.0);
  }
  100% {
    transform: rotateX(90deg) scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  beacon anime
==ooO=(_)=Ooo===================================*/
.BP01-beacon-anime3 {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  background-color: lightskyblue;
  border-radius: 100%;
  animation: scaleout3 1.5s infinite ease-in-out;
  position: absolute;
  top: -100px;
  left: -250px;
}
@keyframes scaleout3 {
  0% {
    transform: rotateY(90deg) scale(0.0);
  }
  100% {
    transform: rotateY(90deg) scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o) P1447anime
==ooO=(_)=Ooo===================================*/
.P1447-animestage {
  -webkit-perspective: 800;
  -webkit-perspective-origin: -50% -50%;
  width: 320px;
  height: 320px;
  margin: 20px;
  position: relative;
  background-color: rgba(206, 213, 237, 0.5);
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.P1447-animestage p {
  color: #3A2C92;
  padding-top: 10px;
  text-align: center;
}
/*  (_)-(_)
     (o o) BP01 anime
==ooO=(_)=Ooo===================================*/
.BP01-animestage {
  -webkit-perspective: 800;
  -webkit-perspective-origin: -50% -50%;
  width: 320px;
  height: 320px;
  margin: 20px;
  position: relative;
  background-color: rgba(206, 213, 237, 1.00);
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.BP01-animestage p {
  color: #3A2C92;
  padding-top: 10px;
  text-align: center;
}
.BP01-anime {
  animation: BP01anime1 15s ease-in-out infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 160px;
  left: 160px;
}
.BP01-wall {
  width: 100px;
  height: 100px;
  color: dimgrey;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -50px;
}
.BP01-wall-line-u {
  width: 100px;
  height: 14px;
  color: dimgrey;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -50px;
}
.BP01-wall-line-l {
  width: 100px;
  height: 14px;
  color: dimgrey;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: 36px;
  left: -50px;
}
.BP01-wall-hole-ul {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  position: absolute;
  top: -49px;
  left: -48px;
}
.BP01-wall-x-ul {
  width: 5px;
  height: 1px;
  position: absolute;
  top: -46px;
  left: -46px;
}
.BP01-wall-hole-ur {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  position: absolute;
  top: -49px;
  left: 39px;
}
.BP01-wall-hole-ll {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  position: absolute;
  top: 39px;
  left: -48px;
}
.BP01-wall-hole-lr {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  position: absolute;
  top: 39px;
  left: 39px;
}
.BP01-backwall {
  width: 250px;
  height: 200px;
  color: dimgrey;
  font-size: 11px;
  text-align: center;
  line-height: 11px;
  font-weight: bold;
  position: absolute;
  top: -105px;
  left: -140px;
}
.BP01-sidehwall {
  width: 30px;
  height: 100px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -65px;
}
.BP01-sidevwall {
  width: 100px;
  height: 30px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  position: absolute;
  top: -65px;
  left: -50px;
}
#BP01-front {
  background-color: #DFDFDF;
  -webkit-transform: translateZ(15px);
}
#BP01-front img {
  position: absolute;
  top: 18px;
  left: 48px;
}
#BP01-front-line-u {
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #C7C7C7;
  background-color: #D4D4D4;
  -webkit-transform: translateZ(17px);
}
#BP01-front-line-l {
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #C7C7C7;
  background-color: #D4D4D4;
  -webkit-transform: translateZ(17px);
}
#BP01-front-hole-ul {
  border: 1px solid #A1A1A1;
  background-color: #B9B9B9;
  -webkit-transform: translateZ(19px);
}
#BP01-front-hole-ur {
  border: 1px solid #A1A1A1;
  background-color: #B9B9B9;
  -webkit-transform: translateZ(19px);
}
#BP01-front-hole-ll {
  border: 1px solid #A1A1A1;
  background-color: #B9B9B9;
  -webkit-transform: translateZ(19px);
}
#BP01-front-hole-lr {
  border: 1px solid #A1A1A1;
  background-color: #B9B9B9;
  -webkit-transform: translateZ(19px);
}
#BP01-front-x {
  border: 1px solid #666;
  -webkit-transform: translateZ(21px);
}
#BP01-back {
  background-color: rgba(206, 213, 237, 1.00);
  -webkit-transform: rotateY(180deg) translateZ(15px);
}
#BP01-left {
  background-color: lavender;
  -webkit-transform: rotateY(-90deg) translateZ(0px);
}
#BP01-right {
  background-color: lavender;
  -webkit-transform: rotateY(90deg) translateZ(100px);
}
#BP01-top {
  background-color: whitesmoke;
  -webkit-transform: rotateX(90deg) translateZ(0px);
}
#BP01-bottom {
  background-color: whitesmoke;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}
@keyframes BP01anime1 {
  0% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(-20deg);
  }
  50% {
    transform: rotateX(-12deg);
  }
  75% {
    transform: rotateX(15deg);
  }
  100% {
    transform: rotateX(5deg);
  }
}
/*  (_)-(_)
     (o o)  D85 anime
==ooO=(_)=Ooo===================================*/
.D85-animestage {
  -webkit-perspective: 600;
  /*	-webkit-perspective-origin: -50% -50%;*/
  width: 320px;
  height: 320px;
  margin: 20px;
  position: relative;
  background-color: rgba(206, 213, 237, 0.5);
  border-radius: 6px;
  border: 1px solid #A1A1A1;
}
.animestage-ant p {
  color: slateblue;
  padding-top: 10px;
  text-align: center;
}
.D85-anime {
  animation: D85antanime 18s ease-in-out infinite;
  animation-delay: 2s;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 150px;
  left: 150px;
}
.D85-anime .wall2 {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.D85-anime .sidevwall2 {
  width: 180px;
  height: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.D85-anime .sidehwall2 {
  width: 30px;
  height: 180px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.D85-anime .basewall2 {
  width: 160px;
  height: 160px;
  border-radius: 5px;
  position: absolute;
  top: -60px;
  left: -65px;
}
#top2 {
  background-color: rgba(150, 150, 150, 1.0);
  -webkit-transform: translateZ(90px);
}
#mid2 {
  background-color: rgba(85, 85, 85, 1.0);
  -webkit-transform: rotateY(180deg) translateZ(-1px);
}
#bottom2 {
  background-color: rgba(85, 85, 85, 1.0);
  -webkit-transform: rotateY(180deg) translateZ(90px);
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 1.0)
}
#left2 {
  background-color: rgba(85, 85, 85, 1.0);
  -webkit-transform: rotateY(-90deg) translateZ(75px);
}
#front2 {
  background-color: rgba(85, 85, 85, 1.0);
  -webkit-transform: rotateX(90deg) translateZ(75px);
}
#base2 {
  background-color: rgba(230, 185, 185, 1.0);
  -webkit-transform: translateZ(-93px);
}
@keyframes D85antanime {
  0% {
    transform: rotateX(0deg);
  }
  15% {
    transform: rotateX(0deg);
  }
  40% {
    transform: rotateX(80deg);
  }
  65% {
    transform: rotateX(80deg) rotateY(45deg);
  }
  75% {
    transform: rotateX(80deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
/*  (_)-(_)
     (o o)  RF ant anime
==ooO=(_)=Ooo===================================*/
.RF-anime1 {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: RFscaleout1 3.0s infinite ease-in-out;
  position: absolute;
  top: -235px;
  left: -235px;
}
@keyframes RFscaleout1 {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  logo RF anime
==ooO=(_)=Ooo===================================*/
.RF-anime2 {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #EECBFF;
  border-radius: 100%;
  animation: RFscaleout1 2.0s infinite ease-in-out;
  position: absolute;
  top: -205px;
  left: -260px;
}
/*  (_)-(_)
     (o o)  beacon anime
==ooO=(_)=Ooo===================================*/
.BP01-beacon-anime2 {
  -webkit-perspective: 1200;
  -webkit-perspective-origin: -50% -50%;
  width: 200px;
  height: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: scaleout2 1.5s infinite ease-in-out;
  position: absolute;
  top: -250px;
  left: -100px;
}
@keyframes scaleout2 {
  0% {
    transform: rotateX(90deg) scale(0.0);
  }
  100% {
    transform: rotateX(90deg) scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  antenna anime
==ooO=(_)=Ooo===================================*/
.antenna-anime {
  position: absolute;
  top: 80px;
  left: 140px;
}
.antenna-anime .middle {
  width: 30px;
  height: 180px;
  background-color: #444;
  position: absolute;
  z-index: 200;
}
.antenna-anime .top {
  width: 30px;
  height: 10px;
  background-color: #888;
  border-radius: 60px / 25px;
  position: absolute;
  top: -5px;
  z-index: 201;
}
.antenna-anime .bottom {
  width: 30px;
  height: 10px;
  background-color: #444;
  -moz-border-radius: 60px / 25px;
  -webkit-border-radius: 60px / 25px;
  border-radius: 60px / 25px;
  position: absolute;
  top: 175px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 1.0)
}
/*  (_)-(_)
     (o o)  RF anime
==ooO=(_)=Ooo===================================*/
.RF-anime {
  width: 500px;
  height: 230px;
  margin: 0 auto;
  background-color: white;
  border-radius: 100%;
  animation: RFscaleout 2.5s infinite ease-in-out;
  position: absolute;
  top: -30px;
  left: -235px;
  z-index: 1;
}
@keyframes RFscaleout {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
/*  (_)-(_)
     (o o)  P1447 rf anime
==ooO=(_)=Ooo===================================*/
.P1447-rf-anime {
  animation: P1447antanime 8.5s ease-in-out alternate infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 150px;
  left: 150px;
}
@keyframes P1447antanime {
  0% {
    transform: rotateX(80deg) rotateY(20deg);
  }
  25% {
    transform: rotateX(50deg) rotateY(10deg);
  }
  50% {
    transform: rotateX(40deg) rotateY(0deg);
  }
  75% {
    transform: rotateX(50deg) rotateY(10deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(20deg);
  }
}
/*  (_)-(_)
     (o o)  monostick rf anime
==ooO=(_)=Ooo===================================*/
.animestage-ant {
  /*	-webkit-perspective-origin: -50% -50%;*/
  width: 320px;
  height: 320px;
  margin: 0px;
  position: relative;
  background: rgba(182, 193, 228, 0.5);
  border-radius: 6px;
  border: 1px solid #A1A1A1;
  box-shadow: 0px 0px 3px 3px #BEB0CA inset;
}
.animestage-ant p {
  color: slateblue;
  padding-top: 10px;
  text-align: center;
}
.monostick-rf-anime {
  animation: monotsickantanime 8.5s ease-in-out alternate infinite;
  -webkit-transform-style: preserve-3d;
  position: absolute;
  top: 150px;
  left: 150px;
}
.monostick {
  width: 72px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -25px;
}
.TWE-AN-P2010 {
  width: 35px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -10px;
}
.TWE-AN-P4208 {
  width: 35px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -5px;
}
.TWE-AN-P2525 {
  width: 35px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -50px;
}
.UART-P {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 200px;
  left: -70px;
}
.MW-A-P1447 {
  width: 35px;
  height: 180px;
  position: absolute;
  top: -100px;
  left: -80px;
}
.MW-A-W0 {
  width: 72px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -85px;
}
.MW-A-W7 {
  width: 72px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -55px;
}
.dip-pcb {
  width: 72px;
  height: 180px;
  position: absolute;
  top: 200px;
  left: -30px;
}
.polality-icon {
  position: absolute;
  top: 260px;
  left: 20px;
}
#front3 {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transform: rotateX(-90deg) translateZ(-260px);
}
#polality3 {
  background-color: rgba(0, 0, 0, 0);
  -webkit-transform: rotateX(0deg);
}
@keyframes monotsickantanime {
  0% {
    transform: rotateX(80deg) rotateY(-15deg);
  }
  25% {
    transform: rotateX(80deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(85deg) rotateY(0deg);
  }
  75% {
    transform: rotateX(100deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(10deg);
  }
}
/*  (_)-(_)
     (o o)  mono wireless logo anime
==ooO=(_)=Ooo===================================*/
.company-logo-anime-base {
  width: 768px;
  height: 400px;
  background: linear-gradient(to bottom, #f00000 0%, #ffffff 100%);
  opacity: 1;
  animation: hue-rotate-anime 3s infinite alternate;
}
@keyframes hue-rotate-anime {
  0% {
    -webkit-filter: hue-rotate(80deg);
    filter: hue-rotate(80deg);
  }
  100% {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
  }
}
/*===================================*/
.logo-contrast {
  display: grid;
  place-items: center;
  max-width: 300px;
  height: 300px;
  margin: 10px auto;
  border-radius: 2rem;
  animation: logo-contrast-anime 3s linear infinite alternate;
}
.logo-contrast img {
  width: 70%;
  height: 70%;
}
@keyframes logo-contrast-anime {
  0% {
    background-color: white;
  }
  40% {
    background-color: white;
  }
  60% {
    background-color: black;
  }
  100% {
    background-color: black;
  }
}
.bg-white {
  display: grid;
  place-items: center;
  max-width: 300px;
  height: 300px;
  border-radius: 6px;
  border: 1px solid #DC9E31;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.3);
  background: hsla(0, 0%, 100%, 1.00);
  margin: 10px;
}
.bg-white img {
  width: 70%;
}
/*  (_)-(_)
     (o o)  レスポンシブテーブル 幅広画面
==ooO=(_)=Ooo===================================*/
.ResTableA {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; /*    border: 1px solid #d8d8d8;*/
  margin: 0px;
}
#main form .ResTableA {
  -moz-box-sizing: border-box; /* box-size[border・padding 込み] */
  box-sizing: border-box; /* box-size[border・padding 込み] */
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ffffff;
  margin-left: 0px;
}
@media (prefers-color-scheme: dark) {
  #main form .ResTableA {
    color: #000000;
  }
}
#main form .ResTableA th {
  -moz-box-sizing: border-box; /* box-size[border・padding 込み] */
  box-sizing: border-box; /* box-size[border・padding 込み] */
  /* border: 1px solid #243C82;*/
  padding: 5px;
  width: 30%;
  color: #F2F5F5;
  font-style: normal;
  font-weight: normal;
  text-align: right;
  vertical-align: middle;
  background-color: rgba(38, 123, 121, 0.80);
}
#main form .ResTableA td {
  padding: 3px;
  text-align: left;
  vertical-align: middle;
  background-color: rgba(210, 220, 220, 0.90);
}
#main form .ResTableA img {
  margin: 0px;
}
#main form .ResTableA p {
  margin: 10px;
}
.ResTableA th {
  -moz-box-sizing: border-box; /* box-size[border・padding 込み] */
  box-sizing: border-box; /* box-size[border・padding 込み] */
  /* border: 1px solid #243C82;*/
  padding: 5px;
  width: 30%;
  color: #F2F5F5;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(38, 123, 121, 0.80);
}
.ResTableA td {
  padding: 5px;
  text-align: left;
  vertical-align: top; /*border-top: dotted 1px #243C82;*/
}
.bx-pager img {
  margin-top: 0px;
  margin-bottom: 0px;
}
.top_icon img {
  margin-top: 1px;
  margin-bottom: 1px;
  width: 25%;
  hight: auto;
}
#main form {
  font-size: 100%;
}
#main form input {
  font-size: 100%;
  width: 100%;
  padding: 3px;
}
#main form input[type="number"] {
  font-size: 100%;
  width: auto;
  margin: 1px;
  padding: 3px;
  text-align: right;
}
#main form input[type="checkbox"] {
  font-size: 100%;
  width: auto;
  padding: 3px;
}
#main form input[type="radio"] {
  font-size: 100%;
  width: auto;
  padding: 3px;
}
#main form input[type="date"] {
  font-size: 100%;
  width: auto;
  padding: 3px;
}
#main form select {
  font-size: 100%;
  padding: 3px;
}
#main form option {
  font-size: 100%;
  padding: 10px;
}
#main form textarea {
  font-size: 100%;
  width: 100%;
  padding: 5px;
}
.drawer-hamburger {
  display: none;
}
.drawer-nav {
  display: none;
}
/*  (_)-(_)
     (o o)  レスポンシブ
==ooO=(_)=Ooo===================================*/
#main {
  width: calc(100% - 256px - 256px - 256px - 256px - 256px);
}
#sideWrap {
  width: calc(256px + 256px + 256px + 256px + 256px);
  font-size: 100%;
  float: right;
  box-sizing: border-box;
  padding-top: 50px;
  overflow: hidden;
}
#side {
  width: calc(256px + 256px + 256px + 256px + 256px);
}
#localNavigation {
  width: 256px;
}
#sideLeft {
  display: flex;
  flex-wrap: wrap;
  width: calc(256px + 256px);
  float: right;
}
#sideLeft2 {
  display: flex;
  flex-wrap: wrap;
  width: calc(256px + 256px);
  float: right;
}
@media (max-width : 2575px) {
  #main {
    width: calc(100% - 256px - 256px - 256px - 256px);
  }
  #sideWrap {
    width: calc(256px + 256px + 256px + 256px);
  }
  #side {
    width: calc(256px + 256px + 256px + 256px);
  }
  #sideLeft {
    width: calc(256px + 256px);
  }
  #sideLeft2 {
    width: 256px;
  }
}
@media (max-width : 2319px) {
  #main {
    width: calc(100% - 256px - 256px - 256px);
  }
  #sideWrap {
    width: calc(256px + 256px + 256px);
  }
  #side {
    width: calc(256px + 256px + 256px);
  }
  #sideLeft {
    width: 256px;
  }
  #sideLeft2 {
    width: 256px;
  }
}
@media (max-width : 2063px) {
  #main {
    width: calc(100% - 256px - 256px);
  }
  #sideWrap {
    width: calc(256px + 256px);
  }
  #side {
    width: calc(256px + 256px);
  }
  #sideLeft {
    width: 256px;
  }
  #sideLeft2 {
    display: none;
  }
}
@media (max-width : 1807px) {
  #main {
    width: calc(100% - 256px);
  }
  #sideWrap {
    width: 256px;
  }
  #side {
    width: 256px;
  }
  #sideLeft {
    display: none;
  }
  #sideLeft2 {
    display: none;
  }
}
/* 1023px 以下はサイドバーを表示しない */
/* Desktop view */
@media (max-width : 1023px) {
  #sideWrap {
    display: none;
  }
  .drawer-hamburger {
    display: inline;
  }
  #localNavigation-upper li a {
    font-size: 80%;
  }
  #main {
    width: 100%;
    overflow: hidden;
  }
  .gnav-col a {
    font-size: 0.9rem;
  }
  .gnavIcon {
    font-size: 0.9rem;
  }
  .drawer-nav {
    display: block;
  }
}
/* Tablet view */
@media (max-width : 767px) {
  .globalNav {
    gap: 10px;
  }
  .gnav-col a {
    font-size: 14px;
  }
  .gnavIcon {
    display: none;
  }
  #localNavigation-upper {
    display: none;
  }
  #swing a {
    display: none;
  }
  #main p {
    margin: 10px;
  }
  #main ul li {
    /* [disabled]margin-left: 30px; */
    /* [disabled]margin-right: 5px; */
  }
  #main ol li {
    margin-left: 30px;
    margin-right: 5px;
  }
  #buy img {
    margin-left: 10px;
  }
  #particles-js {
    width: 100%;
  }
  .top_icon img {
    width: 50%;
    hight: auto;
  }
  .top_products {
    display: none;
  }
  iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tablet view small */
@media (max-width : 580px) {
  .globalNav {
    display: none;
  }
}
/* Mobile view */
@media (max-width: 511px) {
  .globalNav {
    display: none;
  }
  .button_home_text {
    font-size: 0.8rem;
  }
  .grid-4p {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-template-rows: 1fr;
    grid-gap: 0.5rem;
    padding: 1rem;
  }
  .button_home_base {
    text-align: center;
  }
  .button_home_base a {
    display: inline-block;
    width: 100%;
    height: 130px;
    text-decoration: none;
    color: #E6E6E5;
    position: relative;
    transition: opacity 3s ease-in-out;
    font-size: clamp(12px, 1vw, 24px);
    border-radius: 1rem;
  }
  .button_home_base:hover .button_home_text {
    opacity: 1.0;
    color: #3BBEA8;
  }
  .button_home_base:hover .button_home_icon img {
    animation: button-home-icon 2s ease-in-out infinite alternate;
  }
  .button_home_base:active {
    cursor: pointer;
    box-shadow: none;
  }
  .button_home_logo img {
    width: 100px;
    height: 100px;
    transition: opacity 3s ease-in-out;
    opacity: 0.25;
    position: absolute;
    animation: button-home-logo2 15s ease-in-out infinite alternate;
  }
  .button_home_icon img {
    width: 70px;
    height: 70px;
    margin-top: 1rem;
    filter: drop-shadow(5px 5px 5px #231815);
    animation: button-home-icon2 2s ease-in-out infinite alternate;
  }
  #main ol li {
    margin-left: 5px;
    margin-right: 5px;
  }
  .description-product-txt {
    width: 100%;
    margin: 10px;
  }
  .home-button {
    width: 80vw;
  }
  .guidepost {
    flex-direction: column;
  }
  .guidepost-previous {
    flex-basis: 100%;
    margin: 10px;
  }
  .guidepost-next {
    flex-basis: 100%;
    margin: 10px;
  }
  .description-product {
    margin: 10px;
  }
  .item-2rows {
    width: 100%;
    margin: 20px;
  }
  .item-3rows {
    width: 100%;
    margin: 20px;
  }
  .item-card {
    width: 100%;
    margin: 20px;
  }
  .product-item {
    width: 100%;
  }
  .product-item2 {
    width: 100%;
  }
  .capability-item {
    width: 100%;
    text-align: center;
  }
  .top_products {
    display: none;
  }
  .top_icon img {
    width: 50%;
    hight: auto;
  }
  #wrap {
    overflow: hidden;
  }
  #main li {
    margin-left: 20px;
    margin-right: 5px;
    margin-bottom: 20px;
  }
  .topicPath {
    margin-left: 10px;
  }
  .localSearch {
    margin-top: 20px;
    margin-bottom: 30px;
  }
  .localSearch form {
    text-align: center;
  }
  .localSearch .search-field {
    font-size: 150%;
    width: 230px;
    height: 40px;
    text-align: center;
    border-radius: 25px;
    text-indent: 10px;
  }
  .localSearch .sbtn {
    display: none;
  }
  #share-button {
    clear: both;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 30px;
    margin-right: 30px;
    margin-left: 0px;
  }
  #share-button div {
    margin-left: 15px;
    float: right;
  }
  /* form ======================================= */
  #mail form {
    font-size: 120%;
  }
  #main form input {
    width: 100%;
    font-size: 120%;
    padding: 5px;
  }
  #main form input[type="number"] {
    font-size: 90%;
  }
  #main form input[type="radio"] {
    font-size: 90%;
    width: auto;
  }
  #main form input[type="date"] {
    font-size: 120%;
    width: 100%;
  }
  #main form select {
    width: 100%;
    font-size: 120%;
  }
  #main form textarea {
    width: 100%;
    font-size: 120%;
    padding: 5px;
  }
  div.block_cli {
    margin: 10px 5px;
    padding: 10px;
  }
  .warning_notice {
    margin: 10px 5px;
  }
  .info_notice {
    margin: 10px 5px;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  /* form anime ======================================= */
  .form-box {
    margin: 0px;
    padding-top: 40px;
    width: 100%;
    color: #666;
    border-radius: 0px;
    background: #FFF;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0);
  }
  .group {
    position: relative;
    margin-bottom: 35px;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
  }
  .inputMaterial {
    font-size: 100%;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    display: block;
    width: 100%;
    border: none;
    /*border-bottom: 1px solid #757575;*/
    -webkit-appearance: none;
  }
  .inputMaterial:focus {
    outline: none;
  }
  /* LABEL ======================================= */
  form label {
    color: #999;
    font-size: 100%;
    position: absolute;
    left: 15px;
    top: 0px;
    margin: 6px 20px;
    transition: 0.2s ease all;
  }
  /* active state */
  .inputMaterial:focus ~ label, .inputMaterial:valid ~ label {
    top: -20px;
    font-size: 100%;
    color: #2F9693;
  }
  /* BOTTOM BARS ================================= */
  .bar {
    position: relative;
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
  }
  .bar:before {
    left: 50%;
  }
  .bar:after {
    right: 50%;
  }
  /* active state */
  .inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
    width: 50%;
  }
  /*  (_)-(_)
		 (o o)  レスポンシブテーブル
	==ooO=(_)=Ooo===================================*/
  .ResTableA {
    margin: 0;
    border-bottom: none;
    border: none;
  }
  #main form .ResTableA th {
    width: 100%;
    text-align: center;
  }
  .ResTableA th {
    padding: 5px 5px;
    width: 100%;
    display: block;
    margin: 0 auto;
    border: none;
    border-bottom: 1px solid #d8d8d8;
    text-align: left;
  }
  .ResTableA td {
    padding: 5px 5px;
    width: 100%;
    display: list-item; /* リストに変換 */
    list-style: none; /* リストに変換によるドットを非表示 */
    border: none;
    border-bottom: 1px solid #d8d8d8;
  }
  #particles-js {
    width: 100%;
    height: 432px;
  }
}
/* logo-paint ================================= */
.logo-paint {
  display: grid;
  place-items: center;
  width: 100%;
  height: 40vh;
}
.logo-paint .logo-elem-1 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 5s ease-in both;
}
.logo-paint .logo-elem-2 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 1.0s ease-in both;
}
.logo-paint .logo-elem-3 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 1.5s ease-in both;
}
.logo-paint .logo-elem-4 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 2.0s ease-in both;
}
.logo-paint .logo-elem-5 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 2.5s ease-in both;
}
.logo-paint .logo-elem-6 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 2s 3.5s ease-in both;
}
.logo-paint .logo-elem-7 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-8 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-9 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-10 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-11 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-12 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-13 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
.logo-paint .logo-elem-14 {
  fill: #E4007F;
  stroke: #E4007F;
  stroke-width: 2px;
  animation: logo-paint-anime 3s 3.5s ease-in both;
}
@keyframes logo-paint-anime {
  0% {
    fill: transparent;
    stroke-dasharray: 750px;
    stroke-dashoffset: 750px;
  }
  25% {
    fill: transparent;
  }
  50% {
    stroke-dashoffset: 0;
  }
  60% {
    fill: #E4007F;
  }
}
/* stage-logo-anime ================================= */
#stage path {
  fill: #D2CEFF;
  animation: anime 0.5s ease-in both;
}
#left-light path {
  animation: anime 0.5s 1s ease-in both;
}
#right-light path {
  animation: gap-delete 2.5s 2s ease-in both;
}
#right-light-gap path {
  animation: anime 0.3s 3s ease-in both;
}
#center-light path {
  animation: anime 1s 3s ease-in both;
}
@keyframes anime {
  0% {
    fill: transparent;
    opacity: 0;
  }
  100% {
    fill: #D2CEFF;
    opacity: 1;
  }
}
@keyframes gap-delete {
  0% {
    fill: transparent;
    opacity: 0;
  }
  50% {
    fill: #D2CEFF;
    opacity: 1;
  }
  100% {
    fill: transparent;
    opacity: 0;
  }
}