@charset "utf-8";


/*=======================
  モーダルウィンドウ（タイプA）
  =======================*/


/*====================↓モーダルウィンドウ（全体）====================*/


  div[id^=modalwindow_]:not([id*="menu"]) {

    /*位置*/
    position: fixed; /*固定*/
    inset: 0px;      /* top,right,bottom,leftの同時設定*/
    z-index:10;

    /*スクロール*/
    overflow-y: auto; /*縦スクロール（可）*/

    /*アニメーション*/
    transition-duration: 0.3s; /*時間*/
    opacity: 0;                /*透明度*/
    visibility: hidden;        /*非表示（アニメーションさせるため、"display" ではなく "visiblity" を採用）*/

    /*子要素のレイアウト*/
    display:flex;
    justify-content:center;   /*横位置*/
    align-items: safe center; /*縦位置*

    /*----------------------------------------------------------------------------------
      『safe center』について

      【説明】
       『safe center』は、画面に収まる場合は『center』にするが、
       はみ出して見えなくなる危険（アンセーフ）には自動的に『flex-start』（上揃え）に切り替えてくれる。
      ----------------------------------------------------------------------------------*/

  }
  div[id^=modalwindow_]:not([id*="menu"]).open{

    /*アニメーション*/
    opacity: 1;          /*透明度*/
    visibility: visible; /*表示*/

  }
  /*背景*/
  div[id^=modalwindow_]:not([id*="menu"])::before {

    content: '';

    /*位置*/
    position: fixed; /*固定*/
    inset: 0px; /* top,right,bottom,leftの同時設定*/

    /*背景色を設定*/
    background: rgba(
                     0,  /*R*/
                     0,  /*G*/
                     0,  /*B*/
                     0.7 /*A（透明度）*/
                     );

    /*マウス操作対策*/
    pointer-events: none; /*この要素に対するマウスの操作（クリックやスクロール）をすべて無視して、後ろにある要素に突き抜けさせる*/


  }


/*====================↑モーダルウィンドウ（全体）====================*/







/*====================↓モーダルウィンドウ（内容）====================*/


  div[id^=modalwindow_]:not([id*="menu"]) .content {

    /*サイズ*/
    max-width:800px;

    /*背景*/
    background:#FFF;

    /*位置*/
    position:relative; /*子要素（閉じるボタン）のために設定*/

    /*余白*/
    margin:50px;
    padding: 10px;

  }


/*====================↑モーダルウィンドウ（内容）====================*/







/*====================↓モーダルウィンドウ（閉じるボタン）====================*/


  /*----------------------------
    デザインはその時によって変更可能
    ----------------------------*/


  /*----------------
    閉じるボタン（本体）
    -----------------*/
  div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close{

    /*位置*/
    position: absolute; /*親要素基準*/
    top: -30px;
    right: -30px;
    z-index:11;

    /*背景*/
    background: #FF9701;

    /*形*/
    border-radius: 50%;

    /*サイズ*/
    width: 60px;
    height: 60px;

    /*子要素のレイアウト*/
    display: block;
    justify-content:center;

    /*アニメーション*/
    transition: .3s;

  }
  @media (width <= 834px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close{

      /*位置*/
      top: -25px;
      right: -25px;

      /*サイズ*/
      width: 50px;
      height: 50px;


    }
  }
  @media (width <= 480px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close{

      /*位置*/
      top: -20px;
      right: -20px;

      /*サイズ*/
      width: 40px;
      height: 40px;

    }
  }




  /*------------------
    閉じるボタン（『／』）
    ------------------*/
  div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::before{

    content: '';

    /*位置*/
    position: absolute; /*親要素基準*/
    top: 30px;
    right: 15px;
    transform: rotate(-45deg);

    /*線情報*/
    width: 30px;            /*長さ*/
    height: 2px;            /*幅*/
    background-color: #EEE; /*色*/

    /*アニメーション*/
    transition: .3s;


  }
  @media (width <= 834px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::before{

      /*位置*/
      top: 25px;
      right: 12.5px;

      /*線情報*/
      width: 25px; /*長さ*/
    }
  }
  @media (width <= 480px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::before{

      /*位置*/
      top: 20px;
      right: 10px;

      /*線情報*/
      width: 20px; /*長さ*/

    }
  }




  /*------------------
    閉じるボタン（『＼』）
    ------------------*/
  div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::after{

    content: '';

    /*位置*/
    position: absolute; /*親要素基準*/
    top: 30px;
    right: 15px;
    transform: rotate(-135deg);

    /*線情報*/
    width: 30px;            /*長さ*/
    height: 2px;            /*幅*/
    background-color: #EEE; /*色*/

    /*アニメーション*/
    transition: .3s;


  }
  @media (width <= 834px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::after{

      /*位置*/
      top: 25px;
      right: 12.5px;

      /*線情報*/
      width: 25px; /*長さ*/
    }
  }
  @media (width <= 480px){
    div[id^=modalwindow_]:not([id*="menu"]) .modalwindow_button_close::after{

      /*位置*/
      top: 20px;
      right: 10px;

      /*線情報*/
      width: 20px; /*長さ*/

    }
  }


/*====================↑モーダルウィンドウ（閉じるボタン）====================*/