@charset "utf-8";


/*========= モーダル表示のためのCSS ===============*/

/*infoエリアをはじめは非表示*/
#info{
  display: none;
  display: flex;
  justify-content: space-between;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

.modaal-overlay{
     z-index:10;
}


/* パソコンで見たときは"popup_pc"のclassがついた画像が表示される */
.popup_pc { display: block !important; }
.popup_sp { display: none !important; }
 
/* スマートフォンで見たときは"popup_sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .popup_pc { display: none !important; }
    .popup_sp { display: block !important; }
}