@import url(destyle.css);
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
::selection { background: #0d0d0d; color: #FFF; }

::-moz-selection { background: #0d0d0d; color: #FFF; }

a:link, a:visited, a:hover, a:active { text-decoration: none; }

html, body { background: #0d0d0d; font-size: 14px; margin: 0; font-family: "M PLUS Rounded 1c", sans-serif; }

@media screen and (min-width: 376px) { #contents { width: 100%; background-image: url("../img/penlove_bg1.jpg"); background-size: cover; background-attachment: fixed; }
  #wrap { width: 375px; background: #FFF; margin: 0 auto; box-shadow: 0px 0px 30px -5px rgba(0, 0, 0, 0.9); }
  #pl_menu { width: 375px; }
  .pl_item li { max-width: 160px; max-height: 160px; margin-bottom: 18px; }
  .pl_amitem li { max-width: 160px; margin-bottom: 18px; }
  .pl_amitem li a { width: 160px; height: 160px; }
  .pl_amitem li a img { max-width: 140px; max-height: 140px; }
  #pl_detail_image_main img { width: 375px; height: 375px; } }
/* ********************************** */
@media screen and (max-width: 375px) { #wrap { width: 100vw; background: #FFF; margin: 0 auto; }
  #pl_menu { width: 100vw; }
  .pl_item li { width: 47vw; height: 47vw; margin-bottom: 2vw; }
  .pl_amitem li { width: 47vw; margin-bottom: 0.8rem; }
  .pl_amitem li a { width: 46vw; height: 46vw; }
  .pl_amitem li a img { max-width: 40vw; max-height: 40vw; }
  #pl_detail_image_main img { width: 100vw; height: 100vw; } }
/* ********************************** */
#pl_head { background: #0d0d0d; position: sticky; top: 0; }
#pl_head #pl_head_wrap { display: flex; align-items: center; flex-wrap: nowrap; justify-content: space-between; height: 40px; }
#pl_head #pl_head_wrap div:nth-of-type(1) { cursor: pointer; background: #3e3e3e; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; }
#pl_head #pl_head_wrap div:nth-of-type(1) div span { color: #FFF; }
#pl_head #pl_head_wrap div:nth-of-type(2) a img { width: 60px; height: 15px; }
#pl_head #pl_head_wrap div:nth-of-type(3) { height: 40px; width: 40px; }

#pl_menu { display: none; position: absolute; background: #d53232; background: linear-gradient(135deg, rgba(213, 50, 50, 0.9) 0%, rgba(205, 174, 10, 0.9) 50%, rgba(0, 152, 191, 0.9) 100%); position: fixed; top: 40px; }
#pl_menu div:nth-of-type(1) ul { padding: 10px 0; }
#pl_menu div:nth-of-type(1) ul li a { color: #FFF; display: flex; align-items: center; padding: 5px 2px; }
#pl_menu div:nth-of-type(1) ul li a span:nth-of-type(2) { font-weight: 700; }
#pl_menu div:nth-of-type(2) { background: rgba(0, 0, 0, 0.5); }
#pl_menu div:nth-of-type(2) #pl_menu_close { display: flex; align-items: center; justify-content: center; padding: 10px 0; cursor: pointer; }
#pl_menu div:nth-of-type(2) #pl_menu_close span { font-size: 1rem; color: #FFF; }
#pl_menu div:nth-of-type(2) #pl_menu_close span:nth-of-type(2) { font-family: "Poppins", sans-serif; }

#pl_mv { width: 100%; padding: 40px 0; text-align: center; background-image: url("../img/penlove_mv.jpg"); background-size: cover; }
#pl_mv #pl_mv_content span { font-weight: 700; line-height: 1.4rem; color: #FFF; }

.pl_list { margin: 30px 0 40px; }
.pl_list .pl_list_title { padding: 0 20px; margin-bottom: 20px; }
.pl_list .pl_list_title a { display: flex; align-items: center; }
.pl_list .pl_list_title a img { width: 18px; height: 18px; margin-right: 6px; }
.pl_list .pl_list_title a span:nth-of-type(1) { font-weight: 700; font-size: 1.2rem; margin-right: 4px; }
.pl_list .pl_list_title a span:nth-of-type(2) { color: #FFF; font-family: "Poppins", sans-serif; border-radius: 4px; background: #0d0d0d; font-size: .8rem; padding: 2px 4px; }
.pl_list .pl_item { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: flex-start; align-items: flex-start; }
.pl_list .pl_item li a img { width: 100%; border-radius: 10px; }
.pl_list .pl_list_more { text-align: center; margin: 10px 0 5px; }
.pl_list .pl_list_more a { border: 1px solid #0d0d0d; border-radius: 20px; width: 160px; padding: 5px 0; display: inline-block; font-size: .8rem; }
.pl_list .pl_list_more a span { font-family: "Poppins", sans-serif; font-weight: 700; }

.pl_amlist { padding: 30px 0 20px; background: #0d0d0d; }
.pl_amlist .pl_amlist_title { display: flex; align-items: flex-start; justify-content: flex-start; align-content: flex-start; padding: 0 20px; margin-bottom: 20px; font-size: 1.2rem; }
.pl_amlist .pl_amlist_title div:nth-of-type(1) img { width: 18px; height: 18px; margin-right: 6px; }
.pl_amlist .pl_amlist_title div:nth-of-type(2) { padding-top: 1px; }
.pl_amlist .pl_amlist_title div:nth-of-type(2) span { display: block; color: #FFF; }
.pl_amlist .pl_amlist_title div:nth-of-type(2) span:nth-of-type(1) { font-weight: 700; margin-bottom: 2px; }
.pl_amlist .pl_amlist_title div:nth-of-type(2) span:nth-of-type(2) { opacity: .6; font-size: .8rem; }
.pl_amlist .pl_amitem { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: flex-start; align-items: flex-start; }
.pl_amlist .pl_amitem li { display: flex; flex-direction: column; width: 45%; }
.pl_amlist .pl_amitem li a { display: flex; padding: 10px; background: #FFF; justify-content: center; align-items: center; border-radius: 10px; }
.pl_amlist .pl_amitem li div { color: #FFF; font-size: .8rem; margin-top: 6px; }

#pl_detail #pl_detail_image #pl_detail_image_sub { display: flex; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; }
#pl_detail #pl_detail_image #pl_detail_image_sub img { width: 50%; }
#pl_detail #pl_detail_desc { margin: 30px 0; padding: 0 20px; }
#pl_detail #pl_detail_link { text-align: center; margin-bottom: 30px; }
#pl_detail #pl_detail_link a { display: inline-flex; align-items: center; background: #f46365; border-radius: 25px; padding: 10px 25px; }
#pl_detail #pl_detail_link a span { color: #FFF; }
#pl_detail #pl_detail_link a span:nth-of-type(1) { font-size: 1.2rem; margin-right: 5px; }
#pl_detail #pl_detail_back a { display: flex; align-items: center; background: #CCC; font-size: .8rem; padding: 10px 20px; }
#pl_detail #pl_detail_back a span:nth-of-type(1) { font-size: 1.2rem; }

#pl_footer { background: #0d0d0d; color: #FFF; text-align: center; font-size: .8rem; padding: 20px 0; }
#pl_footer div { margin: 20px 0; }
#pl_footer div:nth-of-type(1) a img { width: 100px; height: 42px; }
#pl_footer div:nth-of-type(2) a img { width: 100px; height: 35px; }
#pl_footer div:nth-of-type(3) a { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; margin-top: 5px; }
#pl_footer div:nth-of-type(3) a span { font-size: 1rem; margin-right: 5px; }
#pl_footer div:nth-of-type(4) a { display: inline-flex; align-items: center; font-weight: 700; font-size: 1rem; margin-top: 5px; }
#pl_footer div:nth-of-type(4) a span { font-size: 1rem; margin-right: 5px; }
#pl_footer div:nth-of-type(5) { opacity: .6; font-size: .6rem; }

.pl_error { text-align: center; padding: 164px 0; }
.pl_error div:nth-of-type(1) span { font-size: 6rem; margin-bottom: 0.4rem; }
.pl_error div:nth-of-type(2) { font-weight: 700; }