@charset "UTF-8";
/* CSS Document */


/*2024,8,6あまりにも脳筋戦法なのでもっとスッキリさせる方法を探しておく*/

/*2024,8,8id,classともにナンバリングごとに名付け。class名は縦１、横２で統一しても良いかも。
    2024,8,10 mask以外のclass名は統一*/


/*--アコーディオン（始）--*/
.accordion {
  margin: 2em 0;
}
.accordion__summary {
  background: #fff; /* アコーディオンの見出しの背景色 */
  font-weight: bold;
  position: relative;
  display: block;
  cursor: pointer;
  padding: 5px 38px 5px 10px;
}

.accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion__detail1 {
  display: none;
  background: #fff;
  padding: 4px 10px;
  margin: 10px 0;
}
#text1 {
  display: none;
}
#text1:checked ~ .accordion__detail1{
  display: block;
}
#text1:checked ~ .accordion__summary::after {
  content: "−";
}
.accordion__text1 {
  margin: 0;
}

.accordion__detail2 {
  display: none;
  background: #fff;
  padding: 4px 10px;
  margin: 10px 0;
}
#text2 {
  display: none;
}
#text2:checked ~ .accordion__detail2{
  display: block;
}
#text2:checked ~ .accordion__summary::after {
  content: "−";
}
.accordion__text2{
  margin: 0;
}

.gradation{
  display:block;
  margin: 10px 0 0 0 ;
  padding: 4px 10px 0 10px;
  background: linear-gradient(180deg, #666 0%,#fff 75%); /* 背景色にグラデーションを指定 */
  -webkit-background-clip: text; /* テキストで切り抜く */
  -webkit-text-fill-color: transparent; /* 切り抜いた部分は背景を表示 */
}
#text1:checked ~ .gradation{
  display: none;
}
#text2:checked ~ .gradation{
  display: none;
}
/*--アコーディオン（終）--*/


/*--統一パーツ（始）--*/
.popup-open {
cursor: pointer;  }
.popup-open:hover{
 opacity: 0.6; 
}
.popup-overlay {
display: none; 
}
@keyframes mask-animation {
  10%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.popup-close { 
  display: none;
  cursor: pointer; 
  position: fixed;
  top: 87%;
  left: 84%;
}

/*--縦長画像用Window--*/
.popup-window-group1{
display:none;
}
.popup-window1{
margin:0 auto;
position:relative;
height:auto;
width:100%;
}
.popup-window-group1-2{
 margin: 0 auto 15px auto;
 height: auto;
 width: 100%;
}
.popup-img1{
 height: auto;
 width: 100%;
}
.popup-img1-2{
 position: absolute;
 top:0;
 right: 0;
 left: 0;
 margin: 0 auto;
 animation: mask-animation 5s  ease forwards;
 opacity: 0;
 height: auto;
 width: 100%;
} 

@media screen and (min-width:900px){
.popup-window1{
    height: 100%;
    width: auto;
}
   .popup-window-group1-2{
    height: 100%;
    width: auto;
  }
  .popup-img1{
    height: 100%;
    width: auto;
}
  .popup-img1-2{
    height: 100%;
    width: auto;
}
}
/*--縦長画像用Window--*/

/*--横長画像用Window--*/
.popup-window-group2 {
display: none; }
.popup-window2{
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: auto;
}
.popup-window-group2-2{
  margin: 0 auto 15px auto;
  width: 100%;
  height: auto;
}
.popup-img2{
  width:100%;
  height: auto;
}
.popup-img2-2{
 position: absolute;
  top:0;
  right: 0;
  left: 0;
  margin: 0 auto;
  animation: mask-animation 5s  ease forwards;
  opacity: 0;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1440px){
 .popup-window2{
    width: auto;
    height: 85%;
  }
  .popup-window-group2-2{
    width: auto;
    height: 85%;
  }
  .popup-img2{
    width: auto;
    height: 100%;
  }
  .popup-img2-2{
    width: auto;
    height: 85%;
  } 
}
/*--横長画像用Window--*/

  
/*--テキスト--*/
.popup-text {
  display: block;
  margin: 0 auto 25px auto;  
  text-align: right;
  line-height: 20px;
}
.popup-text:not(:last-of-type) { margin-bottom: 5px;
}


.scrollbar::-webkit-scrollbar{
  height: 8px;
 
}
.scrollbar::-webkit-scrollbar-track{
  background: #ffffff;
}  
.scrollbar::-webkit-scrollbar-thumb{
  background: #cccccc;
  border-radius: 5px;
  border: 2px solid white;
}  

/*--統一パーツ（終）--*/




/*--縦長画像使用例-ThanksMomポップアップ用1--*/
#popup1 {
display: none;
}
#popup1:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup1:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask1{
clip-path: polygon(35% 21%, 65% 21%, 65% 49%, 35% 49%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask1{
height: 100%;
width:fit-content;
  }
}
#popup1:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用2--*/
#popup2 {
display: none; 
}
#popup2:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup2:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask2{
clip-path: polygon(35% 37%, 64% 37%, 64% 64%, 35% 64%);
width: 100%;
height: auto;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask2{
    width: fit-content;
    height: 100%;
  }
}
#popup2:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用3--*/
#popup3 {
display: none; 
}
#popup3:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup3:checked ~ .popup-window-group2{ 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask3{
clip-path: polygon(36% 60%, 64% 60%, 64% 86%, 36% 86%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask3{
    width: fit-content;
    height: 100%;
  }
}
#popup3:checked ~ .popup-close{
  display:block;
}


/*--縦長画像使用例-ThanksMomポップアップ用4--*/
#popup4 {
display: none; 
}
#popup4:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup4:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask4{
clip-path: polygon(38% 61%, 59% 84%, 36% 94%, 15% 71%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask4{
height: 100%;
width:fit-content;
  }
}
#popup4:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用5--*/
#popup5 {
display: none; 
}
#popup5:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup5:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask5{
clip-path: polygon(36% 19%, 64% 19%, 64% 49%, 36% 49%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask5{
    width: fit-content;
    height: 100%;
  }
}
#popup5:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用6--*/
#popup6 {
display: none;
}
#popup6:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup6:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask6{
clip-path: polygon(39% 9%, 60.5% 9%, 60.5% 51%, 39% 51%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask6{
    width: fit-content;
    height: 100%;
  }
}
#popup6:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用7（始）--*/
#popup7 {
display: none;
}
#popup7:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup7:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask7{
clip-path: polygon(36% 35%, 64.5% 35%, 64.5% 63%, 36% 63%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask7{
    width: fit-content;
    height: 100%;
  }
}
#popup7:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用8--*/
#popup8 {
display: none; 
}
#popup8:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup8:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask8{
clip-path: polygon(36% 8%, 64.5% 8%, 64.5% 37%, 36% 37%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask8{
    width: fit-content;
    height: 100%;
  }
}
#popup8:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用9--*/
#popup9 {
display: none; 
}
#popup9:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup9:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask9{
clip-path: polygon(35% 39%, 65% 39%, 65% 68%, 35% 68%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask9{
    width: fit-content;
    height: 100%;
  }
}
#popup9:checked ~ .popup-close{
  display:block;
}


/*--縦長画像使用例-ThanksMomポップアップ用10--*/
#popup10 {
display: none; 
}
#popup10:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup10:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask10{
clip-path: polygon(34% 44%, 59% 44%, 59% 70%, 34% 70%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask10{
height: 100%;
width:  fit-content;
  }
}
#popup10:checked ~ .popup-close{
  display:block;
}


/*--縦長画像使用例-ThanksMomポップアップ用11--*/
#popup11 {
display: none; 
}
#popup11:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup11:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask11{
clip-path: polygon(26% 74%, 67% 74%, 67% 95%, 26% 95%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask11{
height:100%;
width:fit-content;
  }
}
#popup11:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用12--*/
#popup12 {
display: none; 
}
#popup12:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup12:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask12{
clip-path: polygon(40% 37%, 60.5% 37%, 60.5% 64%, 40% 64%);
width: 100%;
height: auto;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask12{
    width: auto;
    height: 100%;
  }
}
#popup12:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用13--*/
#popup13 {
display: none; 
}
#popup13:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup13:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask13{
clip-path: polygon(39% 6%, 64% 6%, 64% 32%, 39% 32%);
width: 100%;
height: auto;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask13{
    width: fit-content;
    height: 100%;
  }
}
#popup13:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用14--*/
#popup14 {
display: none; 
}
#popup14:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup14:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask14{
clip-path: polygon(37% 34%, 65% 34%, 65% 60%, 37% 60%);
width: 100%;
height: auto;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask14{
    width: fit-content;
    height: 100%;
  }
}
#popup14:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用22--*/
#popup22 {
display: none; 
}
#popup22:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup22:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask22{
clip-path: polygon(29% 5%, 48% 5%, 48% 31%, 29% 31%);
width: 100%;
height: auto;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask22{
    width: fit-content;
    height: 100%;
  }
}
#popup22:checked ~ .popup-close{
  display:block;
}


/*--縦長画像使用例-ThanksMomポップアップ用23--*/
#popup23 {
display: none; 
}
#popup23:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup23:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask23{
clip-path: polygon(30% 66%, 70% 66%, 70% 85%, 30% 85%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask23{
height: 100%;
width:fit-content;
  }
}
#popup23:checked ~ .popup-close{
  display:block;
}


/*--縦長画像使用例-ThanksMomポップアップ用24--*/
#popup24 {
display: none; 
}
#popup24:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup24:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask24{
clip-path: polygon(29.5% 31%, 70.5% 31%, 70.5% 51.5%, 29.5% 51.5%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask24{
height:100%;
width:fit-content;
  }
}
#popup24:checked ~ .popup-close{
  display:block;
}


/*--更新はこの後ろから（箔シリーズは最後尾）--*/


/*--縦長画像使用例-ThanksMomポップアップ用15--*/
#popup15 {
display: none; 
}
#popup15:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup15:checked ~ .popup-window-group1 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask15{
clip-path: polygon(18% 9%, 93% 9%, 93% 42%, 18% 42%);
height: auto;
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 900px){
  .mask15{
height: 100%;
width:fit-content;
  }
}
#popup15:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用16--*/
#popup16 {
display: none; 
}
#popup16:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup16:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask-group{
  position: relative;
}
.mask16{
clip-path: polygon(31% 12%, 52% 12%, 52% 41%, 31% 41%);
width: 100%;
height: auto;
margin: 0 auto;
}
.mask16-2{
clip-path: polygon(12.5% 62%, 33.5% 62%, 33.5% 94%, 12.5% 94%);
width: 100%;
height: auto;
margin: 0 auto;
position: absolute;
top:0;
right: 0;
left: 0;
}
@media screen and (min-width: 1440px){
  .mask16{
    width: auto;
    height: 100%;
  }
   .mask16-2{
    width: auto;
    height: 100%;
  }
}
#popup16:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用17--*/
#popup17{
display: none; 
}
#popup17:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup17:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask17{
clip-path: polygon(32% 45%, 68% 45%, 68% 81%, 32% 81%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask17{
    width: fit-content;
    height: 100%;
  }
}
#popup17:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用18--*/
#popup18{
display: none; 
}
#popup18:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup18:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask18{
clip-path: polygon(33% 6%, 66.5% 6%, 66.5% 54%, 33% 54%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask18{
    width: auto;
    height: 100%;
  }
}
#popup18:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用19--*/
#popup19 {
display: none;
}
#popup19:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup19:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow: scroll;
}
.mask-group{
  position: relative;
}
.mask19{
clip-path: polygon(63% 31%, 87% 31%, 87% 69%, 63% 69%);
width: 100%;
height: auto;
margin: 0 auto;
}
.mask19-2{
clip-path: polygon(13% 13%, 37% 13%, 37% 50%, 13% 50%);
width: 100%;
height: auto;
margin: 0 auto;
position: absolute;
top:0;
right: 0;
left: 0;
}
@media screen and (min-width: 1440px){
  .mask19{
    width: 100%;
    height: fit-content;
  }
   .mask19-2{
    width: 100%;
    height: fit-content;
  }
}
#popup19:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用20--*/
#popup20{
display: none; 
}
#popup20:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup20:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask20{
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask20{
    width: fit-content;
    height: 100%;
  }
}
#popup20:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用21--*/
#popup21{
display: none; 
}
#popup21:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup21:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask21{
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask21{
    width: fit-content;
    height: 100%;
  }
}
#popup21:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用25--*/
#popup25{
display: none; 
}
#popup25:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup25:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask25{
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask25{
    width: fit-content;
    height: 100%;
  }
}
#popup25:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用26--*/
#popup26{
display: none;
}
#popup26:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup26:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask26{
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask26{
    width: fit-content;
    height: 100%;
  }
}
#popup26:checked ~ .popup-close{
  display:block;
}


/*--横長画像使用例-ThanksMomポップアップ用27--*/
#popup27{
display: none;
}
#popup27:checked ~ .popup-overlay { 
display: block;
z-index: 99999; background-color: #00000070; position: fixed;
width: 100%; height: 100%; top: 0;
left: 0;
}
#popup27:checked ~ .popup-window-group2 { 
display: block;
z-index: 99999;
width: 70%;
height: 70%;
padding: 20px; 
background-color: #ffffff; 
border-radius: 6px; 
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
overflow-y: scroll;
overflow-x: hidden;
}
.mask27{
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
width: 100%;
height: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 1440px){
  .mask27{
    width: fit-content;
    height: 100%;
  }
}
#popup27:checked ~ .popup-close{
  display:block;
}
   
  
/*--Expected RBRACEが出たのでつけた波括弧です。どこのどういうやつかはわかりません。ちなみにRBRACEは右curly brace（波括弧）LBRACEは左。
（追記）上の方で足りてないとこにつけたら大丈夫になりました--*/