/* Last update: Jun 7, 2022 */
/********************************************************************************/
/* Variables */
:root {
  --bg-image: url('../images/InfoWindow.Resource.Images.IBBG.aflo_AXHA018774.webp');

  --prev-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACbElEQVR4Xu2cMWvCQBiG08ElXZy6SrvoUkGXgg5CC+JSEEGxP0DcTNfYwalxcWhdW3EsRHCwk0MLDkonBWkHFzvr5NIsLuUKQikmufjBXYpv5jvP78lz75k7yYGiKJcKrm0E5oqifBwAkKMdcwBymT0ABEC0gIVBMAgG0QjAIBo/ZBAMgkE0AjCIxg8ZBINgEI0ADKLxQwbBIBhEIwCDaPz+TQZFo9HD6XT6RSvXe2/fA6pUKif1er2qquoRK28ymTzH4/EH76Xu1sPXgEzTvMjn89rf0jqdzn2hUHjZrWRvvXwLaDwel2Kx2NYzu9Fo9JRMJp+8lbpba98BYlnT6/WuQ6HQmV1Jewsol8sdtVqtm2AweGwHZ71eW8VisdLtdpe7OeGtl28MYmHcaDSMQCCg2pWwWq0+a7XafbPZZMfCQi5fALIL498EFovFezqdvhW91EsHNBwOrxKJxJWTDrPZ7DUSidwJUebPINIAsTA2TbMUDofPnQoXuaRv+x5SADE4g8HAcAvjdrt9Vy6X32SYsxlTOCCeMLYsa6nruiEyjO1uglBALIyz2WzJbaVKpVJV0WEsHZBhGKe6rt/6NYylA3Jbrfr9/mMmk+nJzBupIQ1ALrceU4xjbiCkOSBhmeeAhB+KnJDwqMEBym11Yx+xlw+rv9lhu4PDJJ7w3tsNsw0/bLlymIRNew5IrAmOfThA4eCQAxJ7htM0TcPRswss/HmBwyYZTYRuucookDomALkQBCAAok0yGASDYBCNAAyi8UMGwSAYRCMAg2j8kEEwCAbRCMAgGj9kEAyCQTQCzr3xkjcHPj+vCfwGSXUzInLuueEAAAAASUVORK5CYII=");
  --prev-hover-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACIUlEQVR4Xu2cL28CQRBH5wQCBAaDwSBAYECAQPCZ+lX4UggQYBAgMBgMBgECcWRI2jQpd7vcJLvb8NZU9LYwjze/uT8NWZ7nubBeEZhnWfaVAajUjjmAHN0DIADZAhaDMAiDbAQwyMaPDMIgDLIRwCAbPzIIgzDIRgCDbPzIIAzCIBsBDLLx+zcZdL/fpVar2aqtsDt5QJfLRZbLpdxut2d53W5XBoNBhVKrbUka0PF4lM1m86ey4XAonU6nWsVv7koW0Ha7lcPh8LKcXq8n/X7/zVKrHZ4cIM0ateZ0OhVW9LGArterrFYr0dwpWhrUs9lMGo1GNSXe3JWMQQplsViIGlS0ms2mjEYj0Z+hVhKAisL4N4RWqyXj8Tj4qI8OaLfbyX6/LxVCJ5ZOrhgrGiBtJZ1Uak/ZCjnSX72PKIAUjuaNK4wVTrvdjiHOz2sGB+QTxvV6XSaTSdAwLvoUggLSdtK2ck2q6XQaPIyjAzqfz8+2Klsxwzg6INe00gtQvRBNbQVrMQA5PnpazKM3CGkPSIx5D0icKHpC4lLDA5RruumfiHl+FGzMl7HidoeHST7h/bE3zL75ccvVwyRu2ntA0kN47OMBigeHHpD0Gm69XvPo2cWKf15wEYr0+yROFCPV7vWyAHJgAhCAvDqp8CAMwiAMshHAIBs/MgiDMMhGAINs/MggDMIgGwEMsvEjgzAIg2wEynfzJW8lfJ5fE/gACm0AcYnR/B4AAAAASUVORK5CYII=");
  --next-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACi0lEQVR4Xu2csUsCURzHr8HFFqecc3EoBJ1CB6EGp24QPGgUa9UGF8/JoW7tbhP/gERBhBYRChwUWhRs0aVwbXLJxSVeJUj53pnvfPeir4sO+ny/j5/7vne/B+4on48DRVECX6/xtERgB3DYPhBAp1CGTgCAbOwAIADiCxAYBINgEB8BGMTHDxkEg2AQHwEYxMcPGQSDYBAfARjExw8ZBINgEB8BGQ0KhUK7w+HwbauVOTS40Azq9/sX4XD4owc+m81eTdM0dV1/cqiWrQwjDFCtVjtJpVK571XU63VT07T7rVTnwKDCAHW73bNoNHq2as6DweAuEolUHKjH8SGkAESqmkwmj6qq3siWTcIAJZPJvWq1ank8Hi/tZ55Opy+ZTOaq0Wi8Oq7ChgMKA0Tml81mA6VSKefz+fZp853P57N8Pq9blvW8YU2OfkwoIDJzssS32+2i3+8/ZFUiS3gLB7SAMhqNLoPB4DELUq/Xu43FYreOKvHLwVwDROZJW/qXaxiPxw+aplXcCm9XAREQ5XL5KJ1OX9qFdzwe192A5DqgRXgbhqF7vd492cJbCkCL8O50Otd2K1yz2ayI3HlLA+g34W0YRlHUPZx0gAioVqulJhKJc9rlJnJ1AyCbZV86QOvsj/7lJUZ22Ahpis7kHg3LPAUONoqMEMStBgPOOmEscjmnTVX4KoZ2B8MaNMwYcNBytdmRsk410LRXFAXHPjYG4eBwjV7v96PnQqFwLcvphTTL/KI55kb7dI3f8MdbhO+DNpmkm58BoL/WD3LTllXfDYNgEJ+TMAgGwSA+AjCIjx8yCAbBID4CMIiPHzIIBsEgPgIwiI8fMggG8RuEf8BjMCSXGHkAEgXSOz98PgCZVy7WAAAAAElFTkSuQmCC");
  --next-hover-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACOklEQVR4Xu2crW4CQRSFLwIBAoPBYBAgMCBYwUv1VfpMCAQIMAgQGAwGg1gEYptDsklbmNktd7kzDWcMTQrTma/fnjs/CTURkSzLPkXkAz+z/SRQIxy/EgCU0Ro3AQIqsIOACEgXIDSIBtEgHQEapOPHDKJBNEhHgAbp+DGDaBAN0hGgQTp+zCAaRIN0BGI06Hq9Sr1ef+nEqurcNIM2m43s9/vb2BuNhozHY2m321XN5SX9mAE6HA6yXq/vJjEajaTb7b5kclV0agZou93Kbrd7OOZeryfD4bCK+VTeRxSAMKtOpyOwKbZsMgOUpqnMZjNBQLtaq9WSyWQizWazchOe7dAMEAZ4Pp9ltVrdXl0NBk2nUwGsGJopIEwYBi2XSzmdTt75xxLe5oByKqhoqGy+1u/3ZTAYBBUpGCDM2lX6vxPBEgAVLlR4BwUEEMfj8bY+Kgpv5FIISMEB5eG9WCzkcrlEF95RAMrDez6fF1Y4PG6WK+9oAP0lvPG4We3hogMEUNjQYmPrapbVjYAKFhHRASqzPnrLRwxlniHt0Bl7M5Z5BxwuFD0hyK2GB06ZMLYs566hmlcxHnd4rOGBmQcOj1wLVqS+Ww189O0P7XntU2AQLw5LnBz/vnpOkiSa24toynx+OBbi+LTE//DuLebroGcGGfIzBPTfzoNC2vLob9MgGqRzkgbRIBqkI0CDdPyYQTSIBukI0CAdP2YQDaJBOgI0SMePGUSD9AbxG/A8DGv4Hb8Jz03oC+yb8TiOF7XIAAAAAElFTkSuQmCC");
  --close-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAACXBIWXMAABYlAAAWJQFJUiTwAAADWElEQVR4nO3d4W3TUBiG0Q/EFjABCyAGQGIAukel/mcExBzABgxQsUAnoHMUBRxUVUns5LWd5t5zfqGkUq7qp07j+9W8eHh4KDjVS985EgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIi0mJAH6vqZ1XdV9Wvqro541puhjXcD2t6f8a1LKK1/zN1c4B+7Hj8e1Vdr7yWr1V1tePxT1V1u/JaFtNaQJuf8rd7nlszon3xbNxV1YeV1rG41gK6H3l+jYgOxbP1euE1rKa134F+jzx/NRzgpUyJZ2yNF6W1gL5N+JqlIpoST01c48Vo7S2sjjiQc76dneM1n4UWP8ZfDwdqzFxnom7jqYYvJK4VUdfxVONXopeOqPt4qoOtjKUiEs+gh72wuSMSzyO9bKbOFZF4nuhpNz6NSDw79DbOcWpE4tnj1bNc1bK2B3gsiKs9/96nu3iq0SvRU009q0zRZTzV+UTi1LezMd3GU0Za44i6jqcE9NepEXUfTwnov2MjEs9AQEQE9M+xn8iWnmy8GAI6/eN89xGVgOJrQd1H1HNAc11I7DqiXgM6Zm9rzfHYi9PjXtipG6NT9866+njf2xno1HjWHtS/GD0FlI5kiGiHXgKaa55HRE/0ENDcw2AieqT1gJaaJBTRoOWAlh5D7T6iajigtWaYu4+oxYDWHoDvOqLWAro5019PHBPROe/ZOLvWhuo3N7R8M/I1Sw6DTb3B1LuFXn91rZ2BzhlPTTwTja3xorQW0N2B59YaQx2L6NAaL05rAX3e8/jaM8yHItq3xovUWkC3w32Ytz/lm983vpxph/x6eO3tTTXvWrtHdHX+l6nMoPeRVkICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICICIiIgIgIiIiAiAiIiICIC4nRV9Qf9jaigIJERTAAAAABJRU5ErkJggg==");
  --close-hover-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAACXBIWXMAABYlAAAWJQFJUiTwAAADnUlEQVR4nO3d3Y3TQBRA4QvidWmABhAdUAAdkD4i5Z0SEO+UAB1sAdtBRAPbABQQlJUjRdEmsX38MzP3fBISkv0wxmeDY8+s3xwOh5DGeuu/nAgDEmJAQgxIiAEJMSAhBiTEgIQYkBADEmJAQgxIiAEJMSAhBiTEgIQYkBADEmJAQgxIiAEJMSAhBiTEgIQYkBADEmJAQgxIiAEJMSAhBiTEgIQYkBADEmJAQgxIiAEJMSAhBiTEgIQYkBADEmJAQgxIiAEJMSAhLQT0OSIeI+K5+/MnInYFjOvSrhvbaZyP3dirVvv7wo4n4PeVbb8iYrvweK75ERGbK9u+RsTT+kMcp/aAjj/Fn25sLyGiW/Ec7SPiy4LjmVTtAT332GfNiO7Fc/JhmeFML8NF9KY7kUvrG0/Vag/oX8/9lo5oSDx9j6FItQf0c8C+S0U09JNnyDEUp4W3Ng89YXNeE5U0lkW0cA207U5EX3N9EqWLJxq6iF47opTxRGPfwtaKKG080eDX+KUjSh1PNHofaKmI0scTDd9InDsi4+m0fCd6roiM50zrjzKmjsh4LmR4FjZVRMbziiwzEmlExnPFuyJHNY/TCe0bwubK3+9JE0808ixsqDmnWaSKJ5JOqh/631lf6eKJxKsypo4oZTyRfFnPVBGljSdcF4YjSh1PGNCLsRGljycMSJQBjf9av9Zqj6JkD4jeE0ofUeaAprqhmDqirAFNfTc6bUQZA5rrUUbKiLIFNOapeglLhoqV6Wk8nZIx9Cl+intEWT6BaDylLF4sToaAppoMZkSvaD2gqWcSGtGFlgOaaxqqEZ1pNaC55zAbUafFgJaaAJ8+omgwoKVXT6SPqKWA1lp6kzqiVgJae91W2ohaCKiURX8pI6o9oF1hK0bHRFTiaxl6q31h4fHdEw89911yDvPQX/P7cebxzKbmT6D3hcYTAz+JHrpjqVLNAf3tud9aqyeGRNT3WIpT+zXQ/s72tZfe9Ino3jEUrfaAvt3YVsq6rXsR3TqG4tUe0FP3vq3zn+LjRen3wiZ0bbsxnb8XY1/7u8Ii6a930YSyrwsTZEBCDEiIAQkxICEGJMSAhBiQEAMSYkBCDEiIAQkxICEGJMSAhBiQEAMSYkBCDEiIAQkxICEGJMSAhBiQEAMSYkBCDEiIAQkxICEGJMSAhBiQEAMSYkBCDEiIAQkxICEGJMSAhBiQEAMSYkBCDEiIAQkxICEGpPEi4j/aa8R5j5FatgAAAABJRU5ErkJggg==");
}

/* (1920x1080) Full HD Display -> (3840x2160) 4K */
@media screen and (max-width: 3840px) {
  :root {
    --navi-prev-size: 36px;
    --navi-next-size: 36px;
    --navi-close-size: 72px;
    --navi-close-top: 0;
    --navi-close-right: 0;
    --ad-container-right: 24px;
    --ad-container-bottom: 91px;
    --copyright-container-right: 32px;
    --copyright-container-bottom: 35px;
    --copyright-container-font-size: 17px;
    --clock-right: 96px;
    --clock-bottom: 140px;
    --clock-font-size: 120px;
    --clock-line-height: 182px;
    --clock-date-font-size: 30px;
    --clock-date-line-height: 73px;
    --clock-date-right: 96px;
    --clock-date-bottom: 101px;
    --ad-min-width: 250px;
  }
}

/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {
  :root {
    --navi-prev-size: 36px;
    --navi-next-size: 36px;
    --navi-close-size: 72px;
    --navi-close-top: 0;
    --navi-close-right: 0;
    --ad-container-right: 18px;
    --ad-container-bottom: 65px;
    --copyright-container-right: 23px;
    --copyright-container-bottom: 24px;
    --copyright-container-font-size: 12px;
    --clock-right: 70px;
    --clock-bottom: 102px;
    --clock-font-size: 88px;
    --clock-line-height: 132px;
    --clock-date-font-size: 22px;
    --clock-date-line-height: 54px;
    --clock-date-right: 70px;
    --clock-date-bottom: 52px;
    --ad-min-width: 250px;
  }
}

/********************************************************************************/
/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "segoe UI", "游ゴシック体", "Yu Gothic", YuGothic;
}

body {
	background-color: black;
}

#frame_container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

/********************************************************************************/
/* for Animation */
@keyframes ServiceIn {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ServiceOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes FadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/********************************************************************************/
/* for Background */
#bg_container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg_style {
  background: black;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#bg_slide_out, #bg_slide_in, #bg_curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bg_curtain {
  display: none;
}

#bg_copyright {
  position: absolute;
  right: var(--copyright-container-right);
  bottom: var(--copyright-container-bottom);
  font-size: var(--copyright-container-font-size);
  color: white;
  display: none;
}

.service_in {
  animation: ServiceIn 1.0s forwards;
}

.service_out {
  animation: ServiceOut 1.0s forwards;
}

/********************************************************************************/
/* for Notification */
#notification_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;  /* use "flex"*/
  align-items: center;
  justify-content: center;
}

#notification_container div {
  font-size: 30px;
  line-height: 48px;
  color: white;
  width: fit-content;
  margin: 0 auto;
}

/********************************************************************************/
/* for Service */
#service_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#service_bucket {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  display: none;
}

#service_attachment {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#attachment_ad {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  right: var(--ad-container-right);
  bottom: var(--ad-container-bottom);
  max-width: 640px;
  max-height: 600px;
  min-width: 256px;
  min-height: 256px;
  width: 100%;
}

#attachment_ad > div {
  display: inline-block;
  min-width: 256px;
}

.fade_in {
  animation: FadeIn 0.2s forwards;
  opacity: 0;
}

/********************************************************************************/
/* for User control panel */
#panel_container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;  /* use "flex" for display */
  align-items: center;
  pointer-events: none;
  animation-delay: 0.2s;
}

#panel_prev {
  position: absolute;
  left: 0;
  width: var(--navi-prev-size);
  height: var(--navi-prev-size);
  background: var(--prev-image) top center / var(--navi-prev-size) var(--navi-prev-size) no-repeat content-box;
  pointer-events: auto;
}

#panel_prev:hover {
  background: var(--prev-hover-image) top center / var(--navi-prev-size) var(--navi-prev-size) no-repeat content-box;
  display: block;
}

#panel_next {
  position: absolute;
  right: 0;
  width: var(--navi-next-size);
  height: var(--navi-next-size);
  background: var(--next-image) top center / var(--navi-next-size) var(--navi-next-size) no-repeat content-box;
  pointer-events: auto;
}

#panel_next:hover {
  background: var(--next-hover-image) top center / var(--navi-next-size) var(--navi-next-size) no-repeat content-box;
  display: block;
}

#panel_close {
  position: absolute;
  top: var(--navi-close-top);
  right: var(--navi-close-right);
  width: var(--navi-close-size);
  height: var(--navi-close-size);
  background: var(--close-image) top center / var(--navi-close-size) var(--navi-close-size) no-repeat content-box;
  pointer-events: auto;
}

#panel_close:hover {
  background: var(--close-hover-image) top center / var(--navi-close-size) var(--navi-close-size) no-repeat content-box;
  display: block;
}

#panel_prev.fadeout {
  animation: FadeOut 1.5s ease 0.2s 1 forwards;
}

#panel_next.fadeout {
  animation: FadeOut 1.5s ease 0.2s 1 forwards;
}

/********************************************************************************/
/* for Video Ad */
#video_ad_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  background: black;
}

#video_ad_navi_container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  display: none;
}

#video_ad_prev_btn {
  position: relative;
  left: 0;
  width: 36px;
  height: 36px;
  background: url("../images/ui/previous.png") top center / 36px 36px no-repeat content-box;
}

#video_ad_prev_btn:hover {
  background: url("../images/ui/previous_focus.png") top center / 36px 36px no-repeat content-box;
}

#video_ad_next_btn {
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
  background: url("../images/ui/next.png") top center / 36px 36px no-repeat content-box;
}

#video_ad_next_btn:hover {
  background: url("../images/ui/next_focus.png") top center / 36px 36px no-repeat content-box;
}

#video_ad_close_btn {
  --btn-size: 72px;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--btn-size);
  height: var(--btn-size);
  background: url("../images/ui/close.png") top center / var(--btn-size) var(--btn-size) no-repeat content-box;
}

#video_ad_close_btn:hover {
  background: url("../images/ui/close_focus.png") top center / var(--btn-size) var(--btn-size) no-repeat content-box;
}

#video_ad_frame {
  position: absolute;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	margin: auto;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#video_ad_content, #video_ad_display_container {
	position: absolute;
  top: 0;
	left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

#video_ad_content_element {
  width: 800px;
  height: 450px;
  overflow: hidden;
}

#video_ad_volume_btn {
	position: absolute;
	width: 42px;
	height: 42px;
	bottom: 12px;
	right: 36px;
	background-image: url("../images/ui/sound_default.png");
	background-size: contain;
  }
  
#video_ad_volume_btn.on {
	background-image: url("../images/ui/sound_click.png");
}

.video_ad_volume_slider_vertical {
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 200px;
  height: 10px;
  background-color: #969696;
  border: none;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: none;
  -webkit-appearance: none;
}

.video_ad_volume_slider_vertical::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
}

.video_ad_volume_slider_vertical {
  background: #969696;
  height: 10px;
}

.video_ad_volume_slider_vertical::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  background: #e5e9e8;
}

.video_ad_volume_slider_vertical {
  transform: rotate(-90deg);  
  position: absolute;
  bottom: 184px;
  right: -43px;
}

/* Active state for slider thumb*/
/*
.video_ad_volume_slider_vertical:active::-webkit-slider-thumb {
  border: 1px solid #28aaff;
  box-shadow: 0 0 0 2px #28aaff;
}
*/

#video_ad_volume_label {
  position: absolute;
  color: #28aaff;
  font-size: 15px;
  text-align: center;
  line-height: 16px;
  width: 42px;
  right: 36px;
  bottom: 66px;
}

#video_ad_slider_fill_rect {
  pointer-events: none;
  position: absolute;
  bottom: 90px;
  right: 52px;
  padding: 0;
  margin: 0;
  width: 10px;
  height: 0px;
  background-color: #28aaff;
}