@charset "utf-8";
/* =======================================================================================

.

POP-UP



======================================================================================= */

.ppu_container{background-color:#fff; max-width:658px; display:flex; flex-direction: column;}
.ppu_name{ padding: 26px 9px 0; }
.ppu_name h1{font-size:14px; line-height:1.67; letter-spacing:0.050em; text-align:left;}
.ppu_name h2{font-size: 12px; font-weight: 600; line-height: 2; letter-spacing:.030em; text-align: left;}
.ppu_container img{width:100%;height:auto;}
.ppu_gallery{display: flex; flex-direction: column; margin:0 auto; background-color: #fff;padding: 8px;}
.ppu_1piece { border-top: 4px solid #fff; border-bottom: 4px solid #fff; }
.ppu_1piece + .ppu_1piece { border-top: none; }
.ppu_2pieces + .ppu_2pieces { border-top: 4px solid #fff; }
.ppu_2pieces { display: flex; gap:4px; }
.ppu_2piece_pt1 { flex:50;  }
.ppu_2pieces_pt1a { flex:55; }
.ppu_2pieces_pt1b { flex:45; }

.ppu_ttl_ba{ position: relative; background-color: black; height:30px;display:flex;justify-content: space-around;margin: 8px 8px 0; align-items: center;}
.ppu_ttl_ba::after{
  content: "　〉";
  position: absolute;
  left: 50%;
  transform: translateX(-60%)translateY(-2px);
  color: white;
  font-size: 36px;
  font-weight: 500;
}
.ppu_ttl_ba p{color: white; font-size: 14px; font-weight: 700;margin:0;letter-spacing:0.1em;}

@media screen and (min-width: 480px) {
.ppu_name h1{ font-size: 15px; }
.ppu_name h2{ font-size: 13px; }
}
@media screen and (min-width: 560px) {
.ppu_name h1{ font-size: 16px; }
.ppu_name h2{ font-size: 14px; }
}
@media screen and (min-width: 640px) {
.ppu_name h1{ font-size: 18px; }
.ppu_name h2{ font-size: 15px; }
}