@charset "UTF-8";
/* Scss Document */
body {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

iframe {
  border: 0; }

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, ddc, img {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

a {
  color: #fff; }

/*--------------------------
	font setting
--------------------------*/
@font-face {
  font-family: 'NotoSansJP-Regular';
  src: url(font/NotoSansJP-Regular.ttf) format("truetype"); }
@font-face {
  font-family: 'NotoSansJP-Bold';
  src: url(font/NotoSansJP-Bold.ttf) format("truetype"); }
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"), url(font/MaterialIconsRound-Regular.otf); }
/*--------------------------
	common setting
--------------------------*/
.red {
  color: #FF6633; }

.redIcon {
  color: #d73300;
  vertical-align: middle; }

.fukushaPink {
  color: #db2763; }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 26px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

html {
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  color: #445F9C;
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  font-family: "NotoSansJP-Regular";
  margin: 0;
  padding: 0; }

header {
  width: 1000px;
  margin: 0 auto;
  font-size: 1.8em;
  position: relative; }

main {
  position: relative;
  width: 1000px;
  margin: 0 auto; }
  main a {
    text-decoration: none;
    cursor: pointer;
    color: #445F9C; }
  main a:hover {
    opacity: .75; }
  main p {
    line-height: 1.6em; }

section {
  position: relative;
  width: 100%; }

footer {
  margin-top: auto;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  color: #fff;
  text-align: center; }
  footer div {
    width: 1000px;
    margin: 0 auto; }
  footer p {
    font-family: "NotoSansJP-Regular";
    font-size: 14px;
    font-weight: normal;
    padding: 10px; }

button {
  padding: 0;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  font-family: "NotoSansJP-Bold"; }

ruby rt {
  font-size: 0.5em; }

::-webkit-full-page-media, :future, :root ruby {
  padding: 0.6em 0; }

::-webkit-full-page-media, :future, :root rt {
  transform: translateY(0.5em); }

@-moz-document url-prefix() {
  ruby {
    padding: 0.5em 0; }

  rt {
    margin-bottom: -6px; } }
_:lang(x) + _:-webkit-full-screen-document, ruby {
  padding: 0.6em 0; }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

　COMMON

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#NOW_LOADING {
  position: absolute;
  width: 100%;
  top: 0;
  animation: anime_fade_normal 1s ease-out forwards;
  text-align: center;
  /* HTML: <div class="loader"></div> */ }
  #NOW_LOADING p {
    font-size: 21px;
    margin-top: 20px;
    font-weight: bold; }
  #NOW_LOADING .loader {
    width: 50px;
    margin: 0 auto;
    margin-top: 250px;
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg, #0000, #000);
    animation: l26 1s infinite steps(12); }
  #NOW_LOADING .loader,
  #NOW_LOADING .loader:before,
  #NOW_LOADING .loader:after {
    background: radial-gradient(closest-side at 50% 12.5%, #445F9C 96%, #0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #445F9C 96%, #0000) 0 50%/80% 20% repeat-x; }
  #NOW_LOADING .loader:before,
  #NOW_LOADING .loader:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg); }
  #NOW_LOADING .loader:after {
    transform: rotate(60deg); }
@keyframes l26 {
  100% {
    transform: rotate(1turn); } }
.inChapter, .chapterBase {
  display: none;
  animation: anime_fade_normal 1s ease-out forwards; }

.headBtns {
  z-index: 500;
  position: absolute;
  right: 0;
  top: 20px;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 15px; }
  .headBtns span {
    font-size: 20px; }
  .headBtns #soundToggle {
    color: #fff;
    background: #445F9C;
    padding: 2px;
    height: 25px;
    box-shadow: none;
    border-radius: 18px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: 4px; }
    .headBtns #soundToggle span {
      display: block;
      padding: 0px 18px;
      border-radius: 11px; }
    .headBtns #soundToggle .now {
      background-color: #fff;
      color: #445F9C;
      cursor: default; }
  .headBtns #NAcontrol {
    display: flex;
    flex-wrap: nowrap;
    align-content: center; }
    .headBtns #NAcontrol p {
      font-size: 14px;
      padding-right: 5px;
      padding-top: 2px;
      font-weight: bold; }
    .headBtns #NAcontrol button {
      background: #445F9C;
      vertical-align: middle;
      padding: 3px 3px 2px 3px;
      height: 26px;
      box-shadow: none;
      border-radius: 18px;
      color: #fff; }
      .headBtns #NAcontrol button span {
        padding: 0 15px;
        border-radius: 11px;
        height: 20px;
        display: block; }
    .headBtns #NAcontrol .attend {
      animation: anime_play_attend 1.5s infinite; }
@keyframes anime_play_attend {
  0% {
    opacity: 0.2; }
  25% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0.2; } }
@keyframes anime_play_attend2 {
  0% {
    background: #445F9C; }
  25% {
    background: #FEFD6C; }
  75% {
    background: #FEFD6C; }
  100% {
    background: #445F9C; } }
@keyframes anime_fade_normal {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes anime_fade_out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes anime_blink_normal {
  0% {
    opacity: 0.2; }
  25% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0.2; } }
@keyframes anime_blink_simBtns {
  0% {
    opacity: 0.4; }
  10% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0.4; } }
#TOP {
  text-align: center;
  /*
  .naPlayBtn{
  	position: absolute;
  	top:30px;
  	right:180px;
  	border-radius:100vh;
  	width: 50px;
  	height: 50px;
  	padding-top: 5px
  }
  */ }
  #TOP .top_secu {
    position: absolute;
    top: 90px;
    left: 10px;
    width: 270px; }
  #TOP .top_yu {
    position: absolute;
    top: 63px;
    left: 747px;
    width: 168px; }
  #TOP .top_takuma {
    position: absolute;
    top: 302px;
    left: 755px;
    width: 185px; }
  #TOP h1 {
    padding-top: 95px; }
    #TOP h1 img {
      width: 420px; }
  #TOP .topRead {
    margin-top: 10px;
    font-family: "NotoSansJP-Bold";
    line-height: 32px;
    font-size: 18px; }

#BTN_START {
  margin-top: 30px;
  width: 330px; }
  #BTN_START img {
    width: 100%; }

.top_links {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 30px; }
  .top_links button, .top_links a {
    height: 30px;
    line-height: 30px;
    color: #445F9C;
    font-size: 15px;
    font-family: "NotoSansJP-Bold";
    display: flex; }
    .top_links button p, .top_links a p {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #445F9C;
      border-radius: 100%;
      -webkit-box-shadow: 3px 3px 0 #FEFD6C;
      box-shadow: 3px 3px 0 #FEFD6C;
      margin-right: 7px; }
      .top_links button p img, .top_links a p img {
        margin: 5px;
        width: 20px; }

.foot_Links {
  margin-top: 20px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px; }
  .foot_Links .btn_pref img {
    height: 60px; }
  .foot_Links .btn_pref2 img {
    height: 60px; }

#MENU {
  text-align: center;
  margin-bottom: 20px; }
  #MENU .top_links {
    margin-top: 20px;
    justify-content: flex-start; }
  #MENU h1 {
    margin-top: 20px; }
    #MENU h1 img {
      width: 287px; }
  #MENU .chapters {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 16px; }
    #MENU .chapters h3 {
      color: #fff;
      text-align: left;
      font-size: 16px;
      font-family: "NotoSansJP-Bold";
      padding-top: 12px;
      padding-left: 40px; }
    #MENU .chapters .menu_L {
      width: 630px;
      height: 400px; }
    #MENU .chapters .menu_R {
      width: 330px;
      height: 400px; }
    #MENU .chapters ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 10px 20px 20px 20px; }
      #MENU .chapters ul li {
        width: 288px;
        height: 162px;
        overflow: hidden; }
        #MENU .chapters ul li img {
          width: 100%; }
  #MENU h2 {
    margin-top: 30px; }
    #MENU h2 img {
      width: 426px; }
  #MENU .btnGen {
    margin-top: 5px;
    width: 355px; }
    #MENU .btnGen img {
      width: 100%; }

#CHARACTORS ul {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end; }
#CHARACTORS li {
  flex-basis: 30%; }
#CHARACTORS h1 {
  margin: 20px; }
  #CHARACTORS h1 img {
    width: 367px; }
#CHARACTORS h4 {
  font-family: "NotoSansJP-Bold";
  font-size: 20px;
  margin: 10px; }
#CHARACTORS p {
  font-size: 16px;
  text-align: left;
  line-height: 1.4em; }
#CHARACTORS .menu_secu {
  width: 200px; }
#CHARACTORS .menu_yu {
  width: 168px; }
#CHARACTORS .menu_takuma {
  width: 185px; }

#LINKS {
  text-align: left;
  margin-bottom: 60px;
  font-size: 16px; }
  #LINKS .top_links {
    margin-top: 20px;
    justify-content: flex-start; }
  #LINKS h1 {
    font-family: "NotoSansJP-Bold";
    font-size: 24px;
    margin-top: 50px;
    border-bottom: 1px solid #445F9C; }
  #LINKS h3 {
    font-family: "NotoSansJP-Bold";
    font-size: 18px;
    margin-top: 25px;
    margin-left: 20px; }
  #LINKS ul {
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 20px;
    position: relative; }
    #LINKS ul li {
      color: #333;
      margin-left: 25px;
      margin-bottom: 5px;
      line-height: 22px; }
    #LINKS ul li:before {
      content: "●";
      color: #445F9C;
      font-size: 8px;
      line-height: 22px;
      position: absolute;
      left: 8px; }
    #LINKS ul .kessaiAtention {
      font-family: "NotoSansJP-Bold";
      color: #FF6633; }
  #LINKS .href {
    margin-top: 20px; }
    #LINKS .href a {
      font-family: "NotoSansJP-Bold";
      display: inline-flex;
      align-items: center; }
    #LINKS .href .material-icons {
      font-size: 20px; }
  #LINKS .info {
    color: #333; }
  #LINKS .info:before {
    content: "・・・　";
    letter-spacing: -0.5em; }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

　CHAPTER COMMON

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.chapterBase {
  margin-top: 10px; }
  .chapterBase h1 {
    height: 50px;
    color: #fff;
    font-size: 20px;
    font-family: "NotoSansJP-Bold";
    position: relative; }
    .chapterBase h1 p {
      position: absolute;
      bottom: 2px;
      left: 25px; }
    .chapterBase h1 img {
      width: 358px; }
  .chapterBase .workFrame {
    position: relative;
    width: 960px;
    height: 540px;
    background: #243451;
    margin: 0 20px;
    overflow: hidden; }

#footBtns {
  width: 920px;
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; }
  #footBtns button {
    width: 175px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-wrap: nowrap; }
    #footBtns button img {
      width: 100%; }
  #footBtns .nbBtns {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px; }
    #footBtns .nbBtns button {
      position: relative; }
      #footBtns .nbBtns button img {
        position: absolute;
        top: 0;
        left: 0; }
      #footBtns .nbBtns button p {
        width: 140px;
        line-height: 40px;
        text-align: center;
        position: relative;
        color: #fff;
        font-size: 21px; }
    #footBtns .nbBtns .btnBack p {
      margin-left: 30px; }
    #footBtns .nbBtns .blink {
      animation: anime_blink_normal 1.5s infinite; }

#modalWindow, #CHANGE_OK {
  display: none;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100vh;
  text-align: center; }
  #modalWindow p, #CHANGE_OK p {
    font-size: 32px;
    margin-top: 250px;
    color: #FFF; }
  #modalWindow #doyoQuit, #CHANGE_OK #doyoQuit {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 20px; }
    #modalWindow #doyoQuit button, #CHANGE_OK #doyoQuit button {
      color: #fff;
      background: #445F9C;
      display: inline-block;
      flex-basis: 200px;
      font-size: 26px;
      border-radius: 5px;
      border: 2px solid #fff;
      padding: 20px 30px;
      margin: 0 40px; }

#CHANGE_OK p {
  margin-top: 194px; }

.scene2, .scene3, .scene4 {
  display: none; }

video {
  display: block;
  width: 960px;
  height: 540px;
  vertical-align: bottom;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
  outline: none;
  border: none; }

.j_OFF {
  display: none; }

#jimakuSet {
  transform: translate3d(0, 0, 0);
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px;
  border-radius: 7px; }
  #jimakuSet .txt {
    padding: 0 10px;
    color: #fff;
    text-shadow: 2px 2px 1px #000; }
  #jimakuSet #jimakuToggle {
    background: none;
    box-shadow: none; }
    #jimakuSet #jimakuToggle span {
      padding: 0 18px;
      border-radius: 5px;
      font-size: 18px;
      color: #fff; }
    #jimakuSet #jimakuToggle .now {
      background-color: #fff;
      color: #000;
      cursor: default; }

#SIM_BASE {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  background-image: radial-gradient(white, #33a9fd); }
  #SIM_BASE .simulationNow {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); }

.simBG {
  background-image: radial-gradient(black, #33a9fd); }

#DISPLAY {
  position: relative;
  width: 640px;
  height: 360px;
  margin: 0 auto;
  border: 10px solid #33A9FD;
  border-radius: 10px;
  background: #FFF; }
  #DISPLAY .chatStock,
  #DISPLAY .chatWindow {
    opacity: 0;
    position: absolute;
    top: 57px;
    right: 7px;
    width: 188px;
    height: 265px;
    background: #FFF;
    overflow-y: hidden; }
    #DISPLAY .chatStock ul,
    #DISPLAY .chatWindow ul {
      margin: 5px; }
      #DISPLAY .chatStock ul li,
      #DISPLAY .chatWindow ul li {
        clear: both;
        font-size: 11px;
        border-radius: 5px;
        margin-bottom: 2px; }
        #DISPLAY .chatStock ul li img,
        #DISPLAY .chatWindow ul li img {
          width: 25px;
          float: left;
          padding: 5px; }
        #DISPLAY .chatStock ul li h4,
        #DISPLAY .chatWindow ul li h4 {
          font-family: "NotoSansJP-Bold"; }
        #DISPLAY .chatStock ul li p,
        #DISPLAY .chatWindow ul li p {
          padding-bottom: 5px;
          white-space: pre-wrap; }
      #DISPLAY .chatStock ul li:after,
      #DISPLAY .chatWindow ul li:after {
        clear: both; }
      #DISPLAY .chatStock ul li.normal,
      #DISPLAY .chatWindow ul li.normal {
        color: #666; }
        #DISPLAY .chatStock ul li.normal img,
        #DISPLAY .chatWindow ul li.normal img {
          margin-top: 2px; }
        #DISPLAY .chatStock ul li.normal h4,
        #DISPLAY .chatWindow ul li.normal h4 {
          padding-top: 2px; }
      #DISPLAY .chatStock ul li.nagesen,
      #DISPLAY .chatWindow ul li.nagesen {
        color: #fff; }
        #DISPLAY .chatStock ul li.nagesen h4,
        #DISPLAY .chatWindow ul li.nagesen h4 {
          line-height: 35px;
          height: 35px; }
        #DISPLAY .chatStock ul li.nagesen p,
        #DISPLAY .chatWindow ul li.nagesen p {
          padding: 5px;
          font-family: "NotoSansJP-Bold";
          line-height: 1.4em;
          background: rgba(255, 255, 255, 0.2); }
      #DISPLAY .chatStock ul .y100,
      #DISPLAY .chatWindow ul .y100 {
        background: #808080; }
      #DISPLAY .chatStock ul .y200,
      #DISPLAY .chatWindow ul .y200 {
        background: #00C4F6; }
      #DISPLAY .chatStock ul .y500,
      #DISPLAY .chatWindow ul .y500 {
        background: #FB00E7; }
      #DISPLAY .chatStock ul .y1000,
      #DISPLAY .chatWindow ul .y1000 {
        background: #39B54A; }
      #DISPLAY .chatStock ul .y2000,
      #DISPLAY .chatWindow ul .y2000 {
        background: #FA9E00; }
      #DISPLAY .chatStock ul .y5000,
      #DISPLAY .chatWindow ul .y5000 {
        background: #662D91; }
  #DISPLAY .chatStock {
    opacity: 0; }
  #DISPLAY .displayContainer {
    width: 640px;
    position: relative; }
    #DISPLAY .displayContainer > li {
      width: 100%;
      display: none;
      text-align: center; }
      #DISPLAY .displayContainer > li img {
        width: 100%;
        vertical-align: bottom; }
      #DISPLAY .displayContainer > li video {
        width: 100%;
        height: 360px;
        background: #000; }
    #DISPLAY .displayContainer .noimage {
      width: 100%;
      height: 360px;
      background: #243451; }
    #DISPLAY .displayContainer .setSepia {
      filter: sepia(90%); }
    #DISPLAY .displayContainer .simuNoizeStart {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background: radial-gradient(white 60%, #33a9fd);
      animation: anime_fade_normal 1s ease-out forwards; }
    #DISPLAY .displayContainer .checkHere_c1 {
      display: none;
      animation: anime_checkhere 1.5s infinite;
      position: absolute;
      top: 300px;
      left: 85px;
      width: 460px;
      height: 38px;
      border: 6px solid #f15a24;
      border-radius: 2px; }
@keyframes anime_checkhere {
  0% {
    opacity: 1; }
  20% {
    opacity: 1; }
  30% {
    opacity: 0; }
  90% {
    opacity: 0; } }
@keyframes anime_checkheredd {
  0% {
    opacity: 1; }
  10% {
    opacity: 0; }
  90% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    #DISPLAY .displayContainer .checkHere_c2 {
      display: none;
      animation: anime_play_taphere 1.5s infinite;
      position: absolute;
      top: -5px;
      left: 310px;
      width: 163px;
      height: 46px;
      border: 6px solid #fefd6c;
      box-sizing: border-box;
      border-radius: 10px; }
    #DISPLAY .displayContainer .checkHere_c5 {
      display: none;
      position: absolute;
      border-top: 2px solid #f15a24; }
    #DISPLAY .displayContainer .checkHere {
      animation: anime_play_taphere 1.5s infinite;
      position: absolute;
      top: 200px;
      left: 157px;
      width: 77px;
      height: 21px;
      border: 3px solid #f15a24;
      border-radius: 2px;
      /*
      p{
      	color: #F00;
      	font-family: $font_gothic_Bold;
      	font-size: 14px;
      	position:absolute;
      	top:0;
      	left: -10px;
      	width: 100px;
      }
      */ }
      #DISPLAY .displayContainer .checkHere p {
        color: #fff;
        font-family: "NotoSansJP-Bold";
        font-size: 14px;
        animation: anime_play_taphere 1.5s infinite;
        width: 130px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        left: calc(50% - 65px);
        bottom: -55px;
        background: #f15a24;
        border-radius: 15px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
      #DISPLAY .displayContainer .checkHere p:after {
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        pointer-events: none;
        position: absolute;
        border-color: rgba(255, 51, 0, 0);
        border-top-width: 15px;
        border-bottom-width: 15px;
        border-left-width: 10px;
        border-right-width: 10px;
        margin-left: -10px;
        border-bottom-color: #f15a24;
        bottom: 100%;
        left: 50%; }
    #DISPLAY .displayContainer .inputFix {
      position: absolute;
      top: 148px;
      left: 239px;
      font-size: 14px;
      color: #000;
      background: rgba(255, 255, 255, 0);
      border: none; }
  #DISPLAY .fadeIN {
    animation: anime_fade_normal 1s ease-out forwards; }
  #DISPLAY .fadeOUT {
    animation: anime_fade_out 1s ease-out forwards; }
  #DISPLAY .btnContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px; }
    #DISPLAY .btnContainer > li {
      display: none;
      position: absolute;
      text-align: center; }
    #DISPLAY .btnContainer .simStart, #DISPLAY .btnContainer .simEnd {
      animation: anime_fade_normal 0.5s ease-out forwards;
      top: -20px;
      left: -160px;
      width: 960px;
      height: 540px;
      background: rgba(0, 0, 0, 0.6); }
      #DISPLAY .btnContainer .simStart button, #DISPLAY .btnContainer .simEnd button {
        animation: anime_play_taphere 1.5s infinite;
        position: relative;
        width: 458px;
        margin-top: 160px; }
        #DISPLAY .btnContainer .simStart button img, #DISPLAY .btnContainer .simEnd button img {
          width: 100%; }
    #DISPLAY .btnContainer .inputHere {
      top: 141px;
      left: 238px;
      color: #fff;
      font-size: 14px; }
      #DISPLAY .btnContainer .inputHere input {
        color: #000;
        font-size: 14px;
        border: 1px solid #CCC;
        border-radius: 4px;
        width: 163px;
        height: 27px; }
      #DISPLAY .btnContainer .inputHere p {
        cursor: pointer;
        font-family: "NotoSansJP-Bold";
        width: 160px;
        left: calc(50% - 80px);
        z-index: 100; }
      #DISPLAY .btnContainer .inputHere button {
        cursor: default;
        font-size: 16px;
        position: absolute;
        top: 39px;
        left: 0px;
        color: #D2D2D2;
        width: 168px;
        height: 30px;
        border-radius: 4px;
        background: #B5B5B5; }
      #DISPLAY .btnContainer .inputHere .btnBlue {
        cursor: pointer;
        color: #fff;
        background: #04B7EE; }
    #DISPLAY .btnContainer .afterWeek {
      animation: anime_fade_normal 1s ease-out forwards;
      background: rgba(0, 0, 0, 0.8);
      width: 100%;
      height: 360px; }
      #DISPLAY .btnContainer .afterWeek button {
        animation: anime_play_taphere 1.5s infinite;
        height: 60px;
        color: #fff;
        font-size: 24px;
        margin-top: 150px;
        line-height: 60px;
        background: #f15a24;
        border-radius: 30px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
        #DISPLAY .btnContainer .afterWeek button p {
          margin: 0 40px; }
      #DISPLAY .btnContainer .afterWeek .awTxt {
        margin-top: 5px;
        font-family: "NotoSansJP-Bold";
        color: rgba(255, 255, 255, 0.8);
        font-size: 15px; }
  #DISPLAY .inActive {
    pointer-events: none;
    opacity: 0.5; }
  #DISPLAY .tapHere, #DISPLAY .tapHere2 {
    border: 6px solid #f15a24;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(241, 90, 36, 0.2); }
    #DISPLAY .tapHere button, #DISPLAY .tapHere2 button {
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 14px;
      font-family: "NotoSansJP-Bold"; }
  #DISPLAY .tapHere p, #DISPLAY .inputHere p {
    animation: anime_play_taphere 1.5s infinite;
    width: 130px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    left: calc(50% - 65px);
    bottom: -55px;
    background: #f15a24;
    border-radius: 15px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
  #DISPLAY .tapHere p:after, #DISPLAY .inputHere p:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(255, 51, 0, 0);
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-bottom-color: #f15a24;
    bottom: 100%;
    left: 50%; }
  #DISPLAY .wide p {
    width: 180px;
    left: calc(50% - 90px); }
  #DISPLAY .tapHere2 p {
    animation: anime_play_taphere 1.5s infinite;
    width: 130px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: -60px;
    left: calc(50% - 65px);
    background: #f15a24;
    border-radius: 15px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
  #DISPLAY .tapHere2 p:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(255, 51, 0, 0);
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-top-color: #f15a24;
    top: 100%;
    left: 50%; }
  #DISPLAY .simSkip {
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: 10px;
    right: 5px;
    padding: 0 10px;
    background: #f15a24;
    border-radius: 15px;
    height: 30px;
    line-height: 30px; }

.c5_selectMov {
  height: 360px;
  background: #000; }
  .c5_selectMov h3 {
    color: #fff;
    font-size: 16px;
    padding-top: 15px; }

.c5_thumbs, .c5_btns {
  position: absolute;
  top: 55px;
  left: 80px;
  width: 500px;
  display: flex;
  justify-content: space-between; }
  .c5_thumbs div, .c5_btns div {
    width: 125px;
    display: block; }
    .c5_thumbs div img, .c5_btns div img {
      width: 100%; }

.c5_thumbs p {
  text-align: left;
  color: #fff;
  font-size: 12px;
  padding-top: 2px;
  line-height: 1.2em; }

.viewMov button {
  animation: anime_play_taphere_line 1.5s infinite; }

@keyframes anime_play_taphere_line {
  0% {
    border: 2px solid rgba(241, 90, 36, 0.2); }
  10% {
    border: 2px solid #f15a24; }
  90% {
    border: 2px solid #f15a24; }
  100% {
    border: 2px solid rgba(241, 90, 36, 0.2); } }
.c5_btns {
  top: 310px; }
  .c5_btns button {
    color: #fff;
    animation: anime_play_taphere 1.5s infinite; }
  .c5_btns p {
    width: 120px;
    height: 30px;
    line-height: 30px;
    position: relative;
    background: #f15a24;
    border-radius: 15px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
  .c5_btns p:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(255, 51, 0, 0);
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 10px;
    border-right-width: 10px;
    margin-left: -10px;
    border-bottom-color: #f15a24;
    bottom: 100%;
    left: 50%; }

.spMovContainer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 360px;
  background: rgba(0, 0, 0, 0.6); }
  .spMovContainer li {
    margin-top: 7.5px; }
  .spMovContainer video {
    width: 215px;
    height: auto;
    margin: 0 auto; }
  .spMovContainer button {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 12.5px;
    left: 393px;
    color: #FFF;
    background: rgba(0, 0, 0, 0.75); }
    .spMovContainer button span {
      line-height: 30px; }

.lineTalk {
  width: 640px;
  height: 360px;
  overflow-y: scroll;
  background: #000; }
  .lineTalk img {
    position: absolute;
    top: 0;
    left: 140px;
    width: 360px !important; }
  .lineTalk .ltMovThumb {
    position: absolute;
    top: 111px;
    left: 222px; }
    .lineTalk .ltMovThumb img {
      border-radius: 10px;
      width: 120px !important; }
  .lineTalk .ltBox {
    position: relative; }

.viewNEWS {
  width: 640px;
  height: 360px;
  overflow-y: scroll;
  background: #000;
  border-bottom: 1px solid #000; }
  .viewNEWS .vnWindow {
    position: relative;
    background: #FFF;
    width: 360px;
    margin: 0 auto;
    font-size: 15px;
    color: #333;
    text-align: left; }
    .viewNEWS .vnWindow h4, .viewNEWS .vnWindow h3 {
      font-family: "NotoSansJP-Bold";
      padding: 10px; }
    .viewNEWS .vnWindow span {
      color: #FFF;
      background: #CC3333;
      padding: 0 5px;
      margin-right: 5px;
      border-radius: 3px; }
    .viewNEWS .vnWindow h3 {
      border-bottom: 1px solid #000; }
    .viewNEWS .vnWindow > p {
      padding: 10px; }
    .viewNEWS .vnWindow .nImage {
      background: #CCC;
      text-align: center; }
      .viewNEWS .vnWindow .nImage img {
        vertical-align: bottom;
        width: 200px !important; }

.viewSNS {
  width: 640px;
  height: 360px;
  overflow-y: scroll;
  background: #000;
  border-bottom: 1px solid #000; }
  .viewSNS .vsWindow {
    background: #FFF;
    width: 360px;
    margin: 0 auto;
    font-size: 12px;
    color: #333; }
  .viewSNS .vsHead .vsTN {
    width: 200px !important;
    margin: 20px; }
  .viewSNS .vsHead p {
    margin: 0 10px;
    text-align: left;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px; }
  .viewSNS .vsHead span {
    font-family: "NotoSansJP-Bold"; }
  .viewSNS .vsIcons {
    margin: 0 !important;
    width: 360px !important; }
  .viewSNS .vsStatus {
    position: relative;
    width: 360px;
    height: 30px; }
    .viewSNS .vsStatus img {
      vertical-align: bottom;
      position: absolute;
      top: 0;
      left: 0; }
    .viewSNS .vsStatus p {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 12px;
      position: absolute;
      top: 5px; }
    .viewSNS .vsStatus p:nth-child(2) {
      left: 192px; }
    .viewSNS .vsStatus p:nth-child(3) {
      left: 244px; }
  .viewSNS ul li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    font-size: 14px;
    border-top: 1px solid #ccc; }
    .viewSNS ul li .vsIcon {
      width: 40px;
      margin: 10px 10px 0 10px; }
    .viewSNS ul li .vsTxt {
      width: 270px;
      padding-top: 5px; }
      .viewSNS ul li .vsTxt h4 {
        padding: 2px 0; }
      .viewSNS ul li .vsTxt p {
        line-height: 1.25em;
        border: none; }
    .viewSNS ul li .vsOption {
      width: 30px;
      font-size: 20px;
      color: #CCC;
      letter-spacing: -14px; }
    .viewSNS ul li h4 {
      font-family: "NotoSansJP-Bold";
      padding-top: 2px; }
  .viewSNS .vsAttention {
    animation: anime_play_taphere 2s infinite;
    background: rgba(241, 90, 36, 0.25);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .viewSNS .startKSanime {
    animation: anime_play_lineOnly 2s infinite; }

@keyframes anime_play_lineOnly {
  0% {
    border-bottom: 3px solid rgba(241, 90, 36, 0); }
  10% {
    border-bottom: 3px solid #f15a24; }
  90% {
    border-bottom: 3px solid #f15a24; }
  100% {
    border-bottom: 3px solid rgba(241, 90, 36, 0); } }
.c6_insta {
  width: 640px;
  background: #000; }

.tapIcons {
  width: 640px; }
  .tapIcons ul {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-top: 124px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between; }
  .tapIcons li, .tapIcons div {
    width: 66px;
    height: 66px; }
    .tapIcons li button, .tapIcons div button {
      position: relative;
      width: 100%;
      height: 100%; }
    .tapIcons li p, .tapIcons div p {
      animation: anime_play_taphere 1.5s infinite;
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      font-family: "NotoSansJP-Bold";
      color: #FFF;
      background: #f15a24;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
  .tapIcons div {
    position: absolute;
    top: 30px;
    left: 225px;
    width: 60px;
    height: 60px; }

.scrollON {
  overflow-y: scroll;
  overflow-x: hidden; }

.scrollON_invisible {
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none; }

.scrollON_invisible::-webkit-scrollbar {
  display: none; }

@keyframes anime_play_taphere {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 0.2; } }
#SIM_END {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  animation: anime_fade_normal 0.5s ease-out forwards;
  width: 960px;
  height: 540px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center; }
  #SIM_END button {
    animation: anime_play_taphere 1.5s infinite;
    position: relative;
    width: 458px;
    margin-top: 160px; }
    #SIM_END button img {
      width: 100%; }

#END_COVER {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px; }

#MESSAGE {
  position: relative;
  width: 560px;
  height: 130px;
  margin: 0 auto;
  margin-top: 10px;
  background: #243451;
  border-radius: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #FFF;
  /*
  	.spSecu{
  		color: #A1DA5B;
  	}
  	.spYu{
  		color: #F19DB1;
  	}
  */ }
  #MESSAGE .speaker {
    opacity: 0;
    margin: 14.5px 10px 10px 15px;
    font-family: "NotoSansJP-Bold";
    font-size: 15px;
    flex-shrink: 0; }
  #MESSAGE .msgText {
    opacity: 0;
    width: 100%;
    font-size: 17.5px;
    margin: 10px 0 10px 0; }
  #MESSAGE ::-webkit-full-page-media, #MESSAGE :future, #MESSAGE :root .msgText {
    margin-top: -10px; }
  #MESSAGE _:lang(x) + _:-webkit-full-screen-document, #MESSAGE .msgText {
    margin-top: 0; }
  #MESSAGE .continue {
    margin: 10px 10px 10px 0;
    align-self: flex-end;
    width: 30px;
    min-width: 30px; }
    #MESSAGE .continue button {
      display: none;
      animation: anime_play_taphere 1.5s infinite;
      width: 30px;
      height: 30px;
      border-radius: 5px;
      color: #FFF;
      background: #445F9C; }
@keyframes anime_play_continue {
  0% {
    background: #445F9C; }
  5% {
    background: #FEFD6C; }
  30% {
    background: #445F9C; } }
#CHARA_L {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px; }
  #CHARA_L img {
    width: 100%; }

#CHARA_R {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  pointer-events: none; }
  #CHARA_R img {
    width: 100%; }

#MATOME_BASE {
  display: flex;
  align-items: flex-start; }
  #MATOME_BASE h2 {
    margin: 40px;
    border-bottom: 1px #FEFD6C solid; }
    #MATOME_BASE h2 img {
      width: 108px; }
  #MATOME_BASE .secuImg {
    position: absolute;
    left: 5px;
    bottom: 10px;
    width: 220px; }
    #MATOME_BASE .secuImg img {
      width: 100%; }
  #MATOME_BASE .container_R {
    height: 520px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between; }
    #MATOME_BASE .container_R .mMessage {
      position: relative;
      margin-top: 40px;
      margin-bottom: 30px;
      width: 730px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px; }
      #MATOME_BASE .container_R .mMessage p {
        font-size: 20px;
        color: #333;
        padding: 20px; }
    #MATOME_BASE .container_R .mMessage:after {
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      pointer-events: none;
      position: absolute;
      border-top-width: 30px;
      border-bottom-width: 30px;
      border-left-width: 0;
      border-right-width: 30px;
      border-top-color: rgba(255, 255, 255, 0.9);
      top: 100%;
      left: 30px; }
    #MATOME_BASE .container_R .pointList {
      margin: 0 40px 0 30px; }
      #MATOME_BASE .container_R .pointList li {
        margin-bottom: 20px;
        font-size: 20px;
        color: #fff;
        font-family: "NotoSansJP-Bold";
        display: flex;
        align-items: baseline;
        gap: 10px; }
        #MATOME_BASE .container_R .pointList li p:first-child {
          width: 32px;
          height: 32px;
          line-height: 32px;
          color: #243451;
          background: #FEFD6C;
          border-radius: 100%;
          text-align: center;
          flex-shrink: 0; }
    #MATOME_BASE .container_R .on_chapter4 li {
      font-size: 19px;
      margin-bottom: 8px; }
    #MATOME_BASE .container_R button {
      position: relative;
      font-size: 19px;
      color: #FEFD6C;
      border-bottom: 1px solid #FEFD6C;
      /*
      width: 308px;
      margin: 0 auto;
      img{width: 100%}
      */ }
      #MATOME_BASE .container_R button .helpIcon {
        animation: anime_play_taphere 1.5s infinite;
        color: #243451;
        position: absolute;
        top: -5px;
        display: inline-block;
        width: 18px;
        height: 15px;
        line-height: 15px;
        font-size: 14px;
        background: #FEFD6C;
        border-radius: 3px; }
    #MATOME_BASE .container_R .gotoQuiz {
      width: 442px;
      margin: 0 auto; }
      #MATOME_BASE .container_R .gotoQuiz img {
        width: 100%; }
  #MATOME_BASE .baloonHelp {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); }
    #MATOME_BASE .baloonHelp li {
      width: 360px;
      position: absolute;
      background: #FFFFCC;
      color: #333;
      font-size: 16px;
      border-radius: 10px;
      padding: 10px 15px;
      box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); }
      #MATOME_BASE .baloonHelp li h3 {
        font-size: 16px;
        font-family: "NotoSansJP-Bold";
        margin-bottom: 5px; }
      #MATOME_BASE .baloonHelp li button {
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0.5; }
    #MATOME_BASE .baloonHelp li:nth-child(1) {
      top: 135px;
      left: 336px; }
    #MATOME_BASE .baloonHelp li:nth-child(2) {
      top: 140px;
      left: 525px; }
    #MATOME_BASE .baloonHelp li:after {
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      pointer-events: none;
      position: absolute;
      border-color: rgba(255, 51, 0, 0);
      border-top-width: 15px;
      border-bottom-width: 15px;
      border-left-width: 10px;
      border-right-width: 10px;
      margin-left: -10px;
      border-top-color: #FFFFCC;
      top: 100%;
      left: 50%; }

#QUIZ_BASE {
  display: flex;
  align-items: flex-start; }
  #QUIZ_BASE h2 {
    margin: 40px;
    border-bottom: 1px #FEFD6C solid; }
    #QUIZ_BASE h2 img {
      width: 165px; }
  #QUIZ_BASE .quizSecuImg {
    position: absolute;
    left: 5px;
    bottom: 10px;
    width: 220px; }
    #QUIZ_BASE .quizSecuImg img {
      width: 100%; }
  #QUIZ_BASE .container_R {
    width: 675px;
    height: 510px;
    text-align: center; }
    #QUIZ_BASE .container_R .quizCounter {
      width: fit-content;
      margin: auto;
      margin-top: 40px;
      display: flex;
      gap: 20px;
      position: relative; }
      #QUIZ_BASE .container_R .quizCounter li {
        font-size: 16px;
        font-family: "NotoSansJP-Bold";
        position: relative; }
        #QUIZ_BASE .container_R .quizCounter li p {
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #243451;
          background: #445F9C;
          border-radius: 3px;
          text-align: center;
          flex-shrink: 0; }
        #QUIZ_BASE .container_R .quizCounter li img {
          display: none;
          position: absolute;
          top: 5px;
          left: 5px;
          width: 20px; }
      #QUIZ_BASE .container_R .quizCounter .nowQuiz p {
        background: #fff; }
    #QUIZ_BASE .container_R .quizCounter::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      display: block;
      border-bottom: 3px solid #445F9C; }
    #QUIZ_BASE .container_R .quizTxt {
      margin-top: 10px;
      font-size: 20px;
      width: 100%;
      height: 140px;
      background: #445F9C;
      border-radius: 10px;
      display: flex;
      align-items: center; }
      #QUIZ_BASE .container_R .quizTxt p {
        display: none;
        animation: anime_fade_normal 0.5s ease-out forwards;
        display: inline-block;
        vertical-align: middle;
        padding: 15px 30px;
        color: #fff;
        text-align: left; }
    #QUIZ_BASE .container_R .quizAns {
      animation: anime_fade_normal 0.5s ease-out forwards;
      margin-top: 40px;
      margin-bottom: 40px; }
      #QUIZ_BASE .container_R .quizAns button {
        width: 164px;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
        border: 4px solid #445F9C;
        border-radius: 10px; }
        #QUIZ_BASE .container_R .quizAns button img {
          width: 100%;
          vertical-align: bottom; }
      #QUIZ_BASE .container_R .quizAns button:first-child {
        margin-right: 40px; }
      #QUIZ_BASE .container_R .quizAns .choice {
        opacity: 1 !important;
        border: 4px solid #FEFD6C; }
      #QUIZ_BASE .container_R .quizAns .notchoice {
        opacity: 0.5; }
    #QUIZ_BASE .container_R .nextQuiz {
      display: none;
      width: 204px;
      margin: 0 auto; }
      #QUIZ_BASE .container_R .nextQuiz img {
        width: 100%; }
    #QUIZ_BASE .container_R .finishQuiz {
      display: none; }
      #QUIZ_BASE .container_R .finishQuiz img {
        vertical-align: bottom;
        width: 338px; }
  #QUIZ_BASE .quizResult {
    display: none;
    position: absolute;
    left: 210px;
    top: 240px;
    width: 140px;
    background: #fff;
    text-align: center;
    border-radius: 10px; }
    #QUIZ_BASE .quizResult p {
      font-size: 24px;
      font-family: "NotoSansJP-Bold";
      color: #333;
      margin: 20px; }
      #QUIZ_BASE .quizResult p img {
        width: 60px; }
      #QUIZ_BASE .quizResult p .blink {
        animation: anime_blink_quiz 1s forwards; }
@keyframes anime_blink_quiz {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  15% {
    opacity: 0; }
  20% {
    opacity: 1; }
  100% {
    opacity: 1; } }
  #QUIZ_BASE .quizResult:after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-top-width: 0;
    border-bottom-width: 20px;
    border-left-width: 0;
    border-right-width: 25px;
    margin-top: -10px;
    border-right-color: #fff;
    right: 100%;
    top: 22%; }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

　GENERATOR

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#GENERATOR .categories {
  position: relative;
  text-align: center; }
  #GENERATOR .categories h2 {
    color: #fff;
    font-size: 21px;
    margin: 90px 0 40px 0; }
  #GENERATOR .categories ul {
    width: 320px;
    margin: 0 auto; }
    #GENERATOR .categories ul li {
      margin-bottom: 17px; }
      #GENERATOR .categories ul li img {
        width: 100%; }
  #GENERATOR .categories .gen_secu, #GENERATOR .categories .gen_yu {
    position: absolute;
    bottom: 30px; }
  #GENERATOR .categories .gen_secu {
    width: 170px;
    left: 90px; }
  #GENERATOR .categories .gen_yu {
    width: 190px;
    right: 60px; }
#GENERATOR .reBtns {
  margin-top: 10px;
  padding: 0 30px;
  display: flex;
  justify-content: space-between; }
  #GENERATOR .reBtns button img {
    zoom: 0.5; }
#GENERATOR .input {
  display: none; }
  #GENERATOR .input .panelselect {
    margin: 10px 20px; }
    #GENERATOR .input .panelselect h3 img {
      width: 55px; }
    #GENERATOR .input .panelselect li {
      margin-top: 15px; }
      #GENERATOR .input .panelselect li img {
        vertical-align: bottom;
        width: 160px; }
    #GENERATOR .input .panelselect .fstAttend {
      position: absolute;
      top: 90px;
      left: 250px;
      color: #fff;
      font-size: 21px; }
    #GENERATOR .input .panelselect button {
      border: 2px solid #243451; }
    #GENERATOR .input .panelselect .selected {
      border: 2px solid #FEFD6C;
      box-sizing: border-box; }
  #GENERATOR .input .ruleEdit {
    display: none;
    padding: 10px 40px; }
  #GENERATOR .input .preview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); }
    #GENERATOR .input .preview .myRule {
      width: 660px;
      height: 430px;
      margin: 0 auto;
      margin-top: 30px; }
      #GENERATOR .input .preview .myRule .secufigs {
        opacity: 1; }
      #GENERATOR .input .preview .myRule .textBox {
        color: #445F9C;
        padding: 3px;
        border: none;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.5);
        text-align: left !important;
        vertical-align: middle;
        white-space: pre-wrap; }
      #GENERATOR .input .preview .myRule .myText .textBox {
        display: table-cell; }
      #GENERATOR .input .preview .myRule li {
        height: 109px; }
    #GENERATOR .input .preview .reBtns {
      width: 500px;
      margin: 0 auto;
      margin-top: 10px; }
  #GENERATOR .input #ONLY_WEB {
    z-index: 1000;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    text-align: center; }
    #GENERATOR .input #ONLY_WEB p {
      font-size: 24px;
      margin-top: 200px;
      margin-bottom: 30px;
      color: #FFF; }
    #GENERATOR .input #ONLY_WEB a {
      color: #FEFD6C;
      font-size: 20px;
      margin: 20px; }
    #GENERATOR .input #ONLY_WEB .owBack {
      color: #fff;
      background: #445F9C;
      display: inline-block;
      flex-basis: 200px;
      font-size: 16px;
      border-radius: 5px;
      border: 2px solid #fff;
      padding: 10px 30px;
      margin-top: 40px; }
#GENERATOR .examples {
  z-index: 500;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); }
  #GENERATOR .examples .exWindow {
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
    position: relative;
    width: 420px;
    margin: 20px auto;
    background: #243451;
    border: 3px solid #445F9C;
    border-radius: 8px 8px 8px 8px;
    box-sizing: content-box; }
    #GENERATOR .examples .exWindow h3 {
      margin: 10px 0 5px 10px; }
      #GENERATOR .examples .exWindow h3 img {
        zoom: .5; }
    #GENERATOR .examples .exWindow ul {
      margin: 5px; }
      #GENERATOR .examples .exWindow ul li {
        background: #445F9C;
        margin-bottom: 5px;
        border-radius: 3px; }
        #GENERATOR .examples .exWindow ul li button {
          width: 410px;
          height: 60px;
          text-align: left;
          font-size: 16px;
          color: #fff;
          padding: 7px 10px; }
  #GENERATOR .examples .exClose {
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    width: 50px;
    right: -50px;
    height: 40px;
    background: #445F9C;
    border-radius: 0 20px 20px 0;
    color: #fff; }
    #GENERATOR .examples .exClose span {
      line-height: 40px; }
#GENERATOR .myRule {
  position: relative; }
  #GENERATOR .myRule .basePanel img {
    width: 100%; }
  #GENERATOR .myRule h3 {
    position: absolute;
    top: 0;
    left: 130px; }
    #GENERATOR .myRule h3 img {
      width: 400px; }
  #GENERATOR .myRule textarea, #GENERATOR .myRule .textBox {
    font-family: "NotoSansJP-Bold";
    resize: none;
    line-break: anywhere;
    overflow-wrap: break-word;
    word-break: break-all;
    hyphens: auto;
    border: 1px solid #bbb;
    color: #999;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    width: 390px; }
  #GENERATOR .myRule .secufigs {
    position: absolute;
    top: 50px;
    right: 40px;
    width: 140px;
    opacity: 0.5; }
    #GENERATOR .myRule .secufigs img {
      width: 100%;
      margin-bottom: 10px; }
  #GENERATOR .myRule .rules {
    position: absolute;
    top: 45px;
    left: 20px; }
    #GENERATOR .myRule .rules li {
      margin: 10px 0;
      border-bottom: 1px solid rgba(68, 95, 156, 0.5); }
    #GENERATOR .myRule .rules li:last-child {
      border-bottom: none; }
    #GENERATOR .myRule .rules .myText {
      display: flex;
      height: 54px; }
      #GENERATOR .myRule .rules .myText p {
        text-align: center;
        width: 40px;
        line-height: 27px; }
      #GENERATOR .myRule .rules .myText textarea, #GENERATOR .myRule .rules .myText .textBox {
        width: 385px;
        height: 48px; }
      #GENERATOR .myRule .rules .myText button {
        margin-left: 20px; }
        #GENERATOR .myRule .rules .myText button img {
          width: 160px; }
    #GENERATOR .myRule .rules .myReason {
      margin-left: 40px;
      margin-top: 5px;
      margin-bottom: 8px; }
      #GENERATOR .myRule .rules .myReason p {
        height: 12px; }
        #GENERATOR .myRule .rules .myReason p img {
          height: 100%; }
      #GENERATOR .myRule .rules .myReason textarea, #GENERATOR .myRule .rules .myReason .textBox {
        width: 385px;
        height: 20px; }
  #GENERATOR .myRule .myName {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 150px; }
    #GENERATOR .myRule .myName p {
      height: 12px; }
      #GENERATOR .myRule .myName p img {
        height: 100%; }
    #GENERATOR .myRule .myName textarea, #GENERATOR .myRule .myName .textBox {
      width: 150px;
      height: 20px; }
  #GENERATOR .myRule .inputed {
    color: #445F9C; }
#GENERATOR #PREV_CARD {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 900;
  overflow: scroll;
  /*
  .myRule{
  	width: 990px;
  	height: 645px;
  	margin: 0 auto;
  	margin-top: 30px;
  	//box-shadow: 4px 4px 0 0 rgba(0,0,0,.5);
  	
  	.secufigs{
  		opacity: 1 !important;
  	}
  	.textBox{
  		color:$blue_main;
  		padding: 3px;
  		border: none;
  		border-radius: 3px;
  		background: rgba(255,255,255,0.5);
  		text-align: left !important;
  		vertical-align: middle;
  		white-space: pre-wrap;
  	}
  	.myText .textBox{
  		display: table-cell;
  	}
  	li{
  		height: 109px;
  	}
  }
  .reBtns{
  	width: 500px;
  	margin: 0 auto;
  	margin-top: 30px;
  	margin-bottom: 30px;
  }
  */ }
  #GENERATOR #PREV_CARD .chekLength {
    font-family: "NotoSansJP-Bold";
    font-size: 24px;
    white-space: nowrap; }
  #GENERATOR #PREV_CARD .myRule {
    position: relative;
    width: 990px;
    height: 645px;
    margin: 0 auto;
    margin-top: 30px; }
    #GENERATOR #PREV_CARD .myRule .basePanel img {
      width: 100%; }
    #GENERATOR #PREV_CARD .myRule h3 {
      position: absolute;
      top: 0;
      left: 195px; }
      #GENERATOR #PREV_CARD .myRule h3 img {
        width: 600px; }
    #GENERATOR #PREV_CARD .myRule .textBox {
      font-family: "NotoSansJP-Bold";
      /*
      line-break: anywhere;
      overflow-wrap: break-word;
      word-break: break-all;
      hyphens: auto;
      */
      white-space: nowrap;
      border: 1.5px solid #bbb;
      font-size: 24px;
      line-height: 36px;
      width: 585px;
      color: #445F9C;
      padding: 4.5px;
      border: none;
      border-radius: 4.5px;
      background: rgba(255, 255, 255, 0.5);
      text-align: left !important;
      vertical-align: middle; }
    #GENERATOR #PREV_CARD .myRule .secufigs {
      position: absolute;
      top: 75px;
      right: 60px;
      width: 210px;
      opacity: 1 !important; }
      #GENERATOR #PREV_CARD .myRule .secufigs img {
        width: 100%;
        margin-bottom: 15px; }
    #GENERATOR #PREV_CARD .myRule .rules {
      position: absolute;
      top: 67.5px;
      left: 30px; }
      #GENERATOR #PREV_CARD .myRule .rules li {
        height: 163.5px;
        margin: 10px 0;
        border-bottom: 1.5px solid rgba(68, 95, 156, 0.5); }
      #GENERATOR #PREV_CARD .myRule .rules li:last-child {
        border-bottom: none; }
      #GENERATOR #PREV_CARD .myRule .rules .myText {
        display: flex;
        height: 81px;
        position: relative; }
        #GENERATOR #PREV_CARD .myRule .rules .myText p {
          text-align: center;
          width: 60px;
          line-height: 40.5px;
          font-size: 15px; }
        #GENERATOR #PREV_CARD .myRule .rules .myText .mtBase {
          width: 586.5px;
          background: rgba(255, 255, 255, 0.5); }
          #GENERATOR #PREV_CARD .myRule .rules .myText .mtBase .mtVisibleArea {
            width: 580.5px;
            overflow: hidden; }
            #GENERATOR #PREV_CARD .myRule .rules .myText .mtBase .mtVisibleArea .textBox {
              background: none;
              width: 577.5px;
              height: 30px;
              white-space: normal; }
          #GENERATOR #PREV_CARD .myRule .rules .myText .mtBase .mtVisibleArea:nth-child(2) .textBox {
            padding-top: 0; }
        #GENERATOR #PREV_CARD .myRule .rules .myText button {
          margin-left: 30px; }
          #GENERATOR #PREV_CARD .myRule .rules .myText button img {
            width: 240px; }
      #GENERATOR #PREV_CARD .myRule .rules .myReason {
        margin-left: 60px;
        margin-top: 7.5px;
        margin-bottom: 12px; }
        #GENERATOR #PREV_CARD .myRule .rules .myReason p {
          height: 18px; }
          #GENERATOR #PREV_CARD .myRule .rules .myReason p img {
            height: 100%; }
        #GENERATOR #PREV_CARD .myRule .rules .myReason .textBox {
          width: 577.5px;
          height: 30px;
          white-space: normal; }
    #GENERATOR #PREV_CARD .myRule .myName {
      position: absolute;
      bottom: 60px;
      right: 60px;
      width: 225px; }
      #GENERATOR #PREV_CARD .myRule .myName p {
        height: 18px; }
        #GENERATOR #PREV_CARD .myRule .myName p img {
          height: 100%; }
      #GENERATOR #PREV_CARD .myRule .myName .textBox {
        width: 225px;
        height: 30px;
        white-space: normal; }
    #GENERATOR #PREV_CARD .myRule .inputed {
      color: #445F9C; }
  #GENERATOR #PREV_CARD .reBtns {
    width: 500px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px; }

#KIYAKU {
  width: 1200px;
  background: #FFF;
  font-size: 28px;
  color: #333;
  padding: 40px; }
  #KIYAKU h2 {
    font-family: "NotoSansJP-Bold";
    text-align: center;
    font-size: 2em;
    margin: 40px; }
  #KIYAKU dt {
    font-family: "NotoSansJP-Bold";
    margin: 30px 0 10px 0; }
  #KIYAKU li {
    list-style-type: decimal;
    margin-left: 30px;
    margin-bottom: 20px; }
    #KIYAKU li h3 {
      font-size: 1em; }