html {scroll-behavior: smooth;}


/* ------------------------------------------------ */
/* モーダルウィンドウ */
/* ------------------------------------------------ */
/* 共通：表示画像 */
.modal_img {
  width                 : 100% ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
}


/* ------------------------------------------------ */
/* モーダルウィンドウ00：最初から表示 */

.modal00-position {
  position              : absolute;
  top                   : 54.5vw;
  left                  : 77.25%;
  transform             : translate(-50%, -50%) ;
  width                 : 32%;
  height                : auto;
}

.x-position {
  position              : absolute;
  z-index               : +2;
  top                   : 4.3vw;
  right                 : 3.25%;
  transform             : translate(-50%, -50%) ;
}
.x-position:hover {opacity: 0.6;}

.modal00 {
  display               : none;
  width                 : 100%;
  height                : 0px;
  position              : absolute;
  z-index               : +2;
  margin-top            : 0px;
  left                  : 50%;
  transform             : translate(-50%, -50%) ;
}
#modal00-check {
  display: none;
}
#modal00-check:checked + .modal00 {
  display: block;
}
label {
  cursor:pointer;
}

/* ------------------------------------------------ */
/* モーダルウィンドウ01 */
/* 背景のマスク */
.modal01_close {
    display               : none;
    position              : absolute ;
    z-index               : +2 ;
    bottom                : 0% ; /*調整*/
    right                 : 9.5% ; /*調整*/
    width                 : 2.25vw ;
    height                : auto ;
    filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
    animation             : delay 0.3s linear;
}
.modal01_close:hover {opacity:0.6;}

/* 表示されるウィンドウの領域 */
.modal01 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 75%; /*調整*/
  margin-left           : 59.25%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 70%; /*調整*/
  height                : auto;
  animation             : pop-down 0.3s linear;
}
.modal01.show, .modal01_close.show { display : block ;}

/* POPUPボタンのデザイン（SVG以外の場合） */
.modal01_put {
  transform             : translate(-50%, -50%) ;
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  animation             : delay 0.3s linear , tsun2-L1 3.0s linear infinite ;
}
.modal01_put:hover { opacity : 0.6 ; }

/* ------------------------------------------------ */
/* モーダルウィンドウ02 */
/* 背景のマスク */
.modal02_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 0% ; /*調整*/
  right                 : -2.5% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
}
/* 表示されるウィンドウのデザイン */
.modal02 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 86%; /*調整*/
  margin-left           : 69%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 40%; /*調整*/
  height                : auto;
  animation             : pop-down 0.3s linear;
}
.modal02.show, .modal02_close.show { display : block ;}

/* POPUPボタンのデザイン（SVG以外の場合） */
.modal02_put {
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 38%; /*調整*/
  right                 : 16.25vw; /*調整*/
  transform             : translate(-50%, -50%) ;
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  transform-origin      : center center 0 ;
  animation             : tsun2-L1 3.0s linear infinite ;
}
.modal02_put:hover { opacity: 0.6 ; }

/* ------------------------------------------------ */
/* モーダルウィンドウ03 */
/* 欠番 */

/* ------------------------------------------------ */
/* モーダルウィンドウ04 */
/* 背景のマスク */
.modal04_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 41% ; /*調整*/
  right                 : 0% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
}
/* 表示されるウィンドウのデザイン */
.modal04 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 48.5%; /*調整*/
  margin-left           : 45.5%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 70%; /*調整*/
  height                : auto;
  animation             : pop-up 0.3s linear;
}
.modal04.show, .modal04_close.show { display : block ;}

/* POPUPボタンのデザイン */
.modal04_put {
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  animation             : delay 0.3s linear , tsun2-R1 3.0s linear infinite ;
}
.modal04_put:hover { opacity : 0.6 ; }

/* ------------------------------------------------ */
/* モーダルウィンドウ05 */
/* 背景のマスク */
.modal05_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 39.25% ; /*調整*/
  right                 : 7.75% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
}
/* 表示されるウィンドウのデザイン */
.modal05 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 63.5%; /*調整*/
  margin-left           : 58.25%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 70%; /*調整*/
  height                : auto;
  animation             : pop-up 0.3s linear;
}
.modal05.show, .modal05_close.show { display : block ;}

/* POPUPボタンのデザイン */
.modal05_put {
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  animation             : delay 0.3s linear , tsun2-L1 3.0s linear infinite ;
}
.modal05_put:hover { opacity : 0.6 ; }

/* ------------------------------------------------ */
/* モーダルウィンドウ06 */
/* 背景のマスク */
.modal06_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  top                   : 55% ; /*調整*/
  right                 : 10.5% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
}
/* 表示されるウィンドウのデザイン */
.modal06 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 132%; /*調整*/
  margin-left           : 54.5%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 80%; /*調整*/
  height                : auto;
  animation             : pop-down 0.3s linear;
}
.modal06.show, .modal06_close.show { display : block ;}

/* POPUPボタンのデザイン */
.modal06_put {
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  animation             : tsun2-L2 3.0s linear infinite ;
}
.modal06_put:hover { opacity : 0.6 ; }

/* 横スライダーのボタン位置 */
.slider_put {
  position              : absolute;
  z-index               : +2 ;
  bottom                : 44%; /*調整*/
  right                 : 13vw; /*調整*/
  width                 : 3vw;
  height                : 3vw;
  animation             : delay 0.3s linear ;
  animation-fill-mode   : both ;
  animation-delay       : 0.3s;
}


/* ------------------------------------------------ */
/* モーダルウィンドウ07 */
/* 背景のマスク */
.modal07_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 40% ; /*調整*/
  right                 : -2.75% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
  animation-fill-mode   : both ;
  animation-delay       : 9.3s;
}
/* 表示されるウィンドウのデザイン */
.modal07 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 132%; /*調整*/
  margin-left           : 50%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 70%; /*調整*/
  height                : 9vw;
}
.modal07.show, .modal07_close.show { display : block ;}

/* POPUPボタンのデザイン */
.modal07_put {
  position              : absolute ;
  bottom                : 0px;
  right                 : 0px;
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  transform-origin      : center center 0 ;
  animation             : tsun2-L3 3.0s linear infinite ;
}
.modal07_put:hover { opacity : 0.6 ; }

/* modal07で表示する部品 */

/* modal08_putの箱 */
.modal07_box {
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 23%; /*調整*/
  right                 : 5.5%; /*調整*/
  width                 : 3vw;
  height                : 3vw;
  animation             : delay 0.3s linear ;
  animation-fill-mode   : both ;
  animation-delay       : 9.3s;
}

/* pop */
.modal07_img {
  position: absolute ;
  top: 66.5%;
  left: 53.75%;
  width: 75vw;
  height: auto;
  filter              : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation           : pop-down 0.3s linear;
  animation-fill-mode : both ;
  animation-delay     : 9s;
}

/* マーカー1 */
.marker-p3-3 {
  position: absolute ;
  z-index: +1;
  top: -19.25vw;
  left: 9.5%;
  width: 92.5%;
  height: 2.25vw;
  background-color: rgba(255, 255, 50, 0.4);
  border: 1px solid rgba(255, 160, 0, 0.4);
  transform-origin    : left;
  animation           : marker 2s linear;
  animation-fill-mode : both ;
  animation-delay     : 0.5s;
}
.marker-p3-3-2 {
  position: absolute ;
  z-index: +1;
  top: -15.25vw;
  left: 4.2%;
  width: 96%;
  height: 2.25vw;
  background-color: rgba(255, 255, 50, 0.4);
  border: 1px solid rgba(255, 160, 0, 0.4);
  transform-origin    : left;
  animation           : marker 2s linear;
  animation-fill-mode : both ;
  animation-delay     : 2s;
}

/* マーカー2 */
.marker-p3-4 {
  position: absolute ;
  z-index: +1;
  top: 25.25vw;
  left: 3.5%;
  width: 98.5%;
  height: 2.25vw;
  background-color: rgba(255, 255, 50, 0.4);
  border: 1px solid rgba(255, 160, 0, 0.4);
  transform-origin    : left;
  animation           : marker 2s linear;
  animation-fill-mode : both ;
  animation-delay     : 4.5s;
}
.marker-p3-4-2 {
  position: absolute ;
  z-index: +1;
  top: 29.5vw;
  left: 3.5%;
  width: 59.5%;
  height: 2.25vw;
  background-color: rgba(255, 255, 50, 0.4);
  border: 1px solid rgba(255, 160, 0, 0.4);
  transform-origin    : left;
  animation           : marker 2s linear;
  animation-fill-mode : both ;
  animation-delay     : 6.5s;
}

/* ------------------------------------------------ */
/* モーダルウィンドウ08 */
/* 背景のマスク */
.modal08_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 0% ; /*調整*/
  right                 : 5% ; /*調整*/
  width                 : 2.25vw ;
  height                : auto ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : delay 0.3s linear;
  animation-fill-mode   : both ;
  animation-delay       : 6.3s;
}
/* 表示されるウィンドウのデザイン */
.modal08 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 156%; /*調整*/
  margin-left           : 53.5%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 70%; /*調整*/
  height                : 45vw;
}
.modal08.show, .modal08_close.show { display : block ;}

/* POPUPボタンのデザイン */
.modal08_put {
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 0px; /*調整*/
  right                 : 0px; /*調整*/
  cursor                : pointer ;
  filter                : drop-shadow( 1px 1px 2px rgba(0, 0, 0, 0.3)) ;
  transform-origin      : center center 0 ;
  animation             : tsun2-L4 3.0s linear infinite ;
}
.modal08_put:hover { opacity : 0.6 ; }



/* modal08で表示する部品 */

/* スライダーボタンの箱 */
.modal08_box {
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 5.75%; /*調整*/
  right                 : 7.5vw; /*調整*/
  width                 : 3vw;
  height                : 3vw;
  animation             : delay 0.3s linear ;
  animation-fill-mode   : both ;
  animation-delay       : 0.3s;
}