html {scroll-behavior: smooth;}


/* ------------------------------------------------ */
/* モーダルに合わせた移動先 */

.p2-1o {
    position          : absolute ;
    margin-top        : -10% ;
    /* 以下不要 */
    opacity : 1 ;
    left              : 0px;
    width             : 50px ;
    height            : 10px ;
    background-color  : rgb(0, 255, 255) ;
}
.p2-1c {
    position          : absolute ;
    margin-top        : 5% ;
    /* 以下不要 */
    opacity : 1 ;
    left              : 0px;
    width             : 50px ;
    height            : 10px ;
    background-color  : rgb(0, 0, 255) ;
}

.p2-2o {
    position          : absolute ;
    margin-top        : 25% ;
    /* 以下不要 */
    opacity : 1 ;
    left              : 0px;
    width             : 50px ;
    height            : 10px ;
    background-color  : rgb(0, 255, 125) ;
}

.p2-2c {
    position          : absolute ;
    margin-top        : 25% ;
    /* 以下不要 */
    opacity : 1 ;
    left              : 0px;
    width             : 50px ;
    height            : 10px ;
    background-color  : rgb(0, 255, 0) ;
}



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

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

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

/* ------------------------------------------------ */
/* モーダルウィンドウ02 */
/* 背景のマスク */
.modal02_close {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  bottom                : 2.5% ; /*調整*/
  right                 : 10% ; /*調整*/
  width                 : 2.25vw ;
  height                : 1.25vw ;
  background-image      : url(images/x-p.png) ;
  background-size       : contain ;
  background-repeat     : no-repeat ;
  filter                : drop-shadow(0px 0px 5px rgba(0,0,0,0.3));
  animation             : fadein 0.5s linear;
  animation-fill-mode   : both ;
  animation-delay       : 0.5s;
}
/* 表示されるウィンドウのデザイン */
.modal02 {
  display               : none;
  position              : absolute ;
  z-index               : +2 ;
  margin-top            : 44.25%; /*調整*/
  margin-left           : 60.5%; /*調整*/
  transform             : translate(-50%, -50%) ;
  width                 : 65%; /*調整*/
  height                : auto;
  animation             : pop-down 0.3s linear;
}
.modal02.show, .modal02_close.show { display : block ;}

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