popup.css

/* 混雑ポップアップ */
/* ウインドウ */
.popup-c {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #fafa67;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 670px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-c {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-c:checked + .popup-c {
  display: block;
}

/* 閉じる */
.icon-close-c {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-c {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-c {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
  vertical-align: middle;
}

input#btn-send-c {
  background-color: #ffff00;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 570px;
  left: 190px;
}

header.site-header-c{
    background: #fafa67;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 50%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

/* 開く */
.btn-open-c{
  z-index: 11;
  height: 120px;
  margin: 30px;
  text-align: right;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s1 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s1 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s1:checked + .popup-s1 {
  display: block;
}

/* 閉じる */
.icon-close-s1 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s1 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s1 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s1 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s1{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

/* 開く */
.btn-open-s1{
  background: #fff;
  position: absolute;
  top: 1175px;
  left: 39%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s2 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s2 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s2:checked + .popup-s2 {
  display: block;
}

/* 閉じる */
.icon-close-s2 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s2 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s2 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s2 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s2{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s2{
  background: #fff;
  position: absolute;
  top: 1175px;
  left: 90%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s3 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s3 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s3:checked + .popup-s3 {
  display: block;
}

/* 閉じる */
.icon-close-s3 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s3 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s3 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s3 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s3{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s3{
  background: #fff;
  position: absolute;
  top: 1725px;
  left: 24%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s4 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s4 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s4:checked + .popup-s4 {
  display: block;
}

/* 閉じる */
.icon-close-s4 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s4 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s4 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s4 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s4{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s4{
  background: #fff;
  position: absolute;
  top: 1725px;
  left: 57%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s5 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s5 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s5:checked + .popup-s5 {
  display: block;
}

/* 閉じる */
.icon-close-s5 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s5 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s5 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s5 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s5{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s5{
  background: #fff;
  position: absolute;
  top: 1725px;
  left: 90%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s6 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s6 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s6:checked + .popup-s6 {
  display: block;
}

/* 閉じる */
.icon-close-s6 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s6 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s6 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s6 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s6{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s6{
  background: #fff;
  position: absolute;
  top: 2165px;
  left: 24%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s7 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s7 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s7:checked + .popup-s7 {
  display: block;
}

/* 閉じる */
.icon-close-s7 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s7 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s7 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s7 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s7{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s7{
  background: #fff;
  position: absolute;
  top: 2165px;
  left: 57%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s8 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s8 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s8:checked + .popup-s8 {
  display: block;
}

/* 閉じる */
.icon-close-s8 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s8 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s8 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s8 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s8{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s8{
  background: #fff;
  position: absolute;
  top: 2165px;
  left: 90%;
}

/* 売り切れポップアップ */
/* ウインドウ */
.popup-s9 {
  background-color: #fff;
  border: solid;
  border-radius: 45px;
  border-color: #99cc99;
  box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
  display: none;
  position: fixed;
  top: 10%;
  left: 0%;
  right: 0%;
  bottom: 20%;
  margin: auto;
  width: 600px;
  height: 620px;
  z-index: 4;
}

/* チェックボックスの初期設定 */
#popup-on-s9 {
  display: none;
}

/* チェックされたらポップアップウインドウを開く */
#popup-on-s9:checked + .popup-s9 {
  display: block;
}

/* 閉じる */
.icon-close-s9 {
  background: rgba(255, 255, 255, 0);
  color: #808080;
  font-size: 100px;
  padding: 0 40px;
  position: absolute;
  right: 0;
  top: -3%;
  z-index: 5;
}

/* ポップアップの内容 */
.popup-content-s9 {
  margin-top: -10em;
  width: 90%;
  font-size: 45px;
  text-align: center;
} 

input#btn-select-s9 {
  position: relative;
  top: -10px;
  margin-right: 35px;
  transform: scale(3.0);
}

input#btn-send-s9 {
  background-color: #089b48;
  border-style: none;
  font-size: 30pt;
  width: 200px;
  color: #000;
  height: 65px;
  position: absolute;
  top: 520px;
  left: 190px;
}

header.site-header-s9{
    background: #99cc99;
    height: 120px;
    width: 601px;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 43%;
    border-radius: 45px 45px 0px 0px;
    margin: auto;
    position: fixed;
    z-index: 4;
}

.btn-open-s9{
  background: #fff;
  position: absolute;
  top: 2600px;
  left: 85%;
}