@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap');

:root {
  --purple : #4D4398;
  --pink : #E95298;
}
#LPcontent {
  font-family: "M PLUS 1p", sans-serif;
  color: var(--purple);
  padding: 50px 20px 100px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/bg.jpg) no-repeat center top / cover;
}
#LPcontent * {
  box-sizing: border-box;
}
#LPcontent .color {
  color: var(--pink);
}
#LPcontent section {
  width: min(100%, 1200px);
  margin-inline: auto;
}
#LPcontent .section_box {
  background: #FFF8F8;
  border-radius: 54px;
  padding: 60px 120px 81px;
}
#LPcontent .section_box+.section_box {
  margin-top: 80px;
}
#mv {
  margin-bottom: 60px;
}
#lead {
  margin-bottom: 105px;
}
.lead_catch {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
  rotate: z 0.05deg;
}
.lead_text {
  text-align: center;
  font-size: 20px;
  margin-bottom: 52px;
  rotate: z 0.05deg;
}
.inpagenav ul {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 20px;
}
.inpagenav ul li {
  flex: 1;
}
.inpagenav ul li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/bg_pink.png) no-repeat center top / cover;
  border-radius: 12px;
  padding-block: 20px 28px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 40px #EF0A6A;
  position: relative;
  rotate: z 0.05deg;
}
.inpagenav ul li.purple a {
  background-image: url(/img/usr/freepage/ptrsuou_kotobukiyashop/bg_purple.png);
  text-shadow: 0 0 40px #562F7E;
}
.inpagenav ul li a:before {
  content:"";
  display: inline-block;
  width: 80px;
  height: 66px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/ribon_pink.png) no-repeat center / contain;
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 66%;
}
.inpagenav ul li.purple a:before {
  background-image: url(/img/usr/freepage/ptrsuou_kotobukiyashop/ribon_purple.png)
}
.inpagenav ul li.limited a:after {
  content: "オンラインショップ限定";
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  line-height: 0;
  width: 184px;
  height: 0;
  border-block: 13px solid #FFB1CA;
  border-inline: 8px solid transparent;
  color: #EF0A6A;
  font-size: 13px;
}
h2.section_title {
  width: min(80%, 543px);
  margin-inline: auto;
  margin-bottom: 64px;
  position: relative;
  text-align: center;
}
h3.insection_title {
  width: min(70%, 460px);
  margin-inline: auto;
  margin-bottom: 52px;
  position: relative;
  text-align: center;
}
h2.section_title:before,
h3.insection_title:before {
  content: "";
  display: inline-block;
  height: 0;
  border-block: solid #FFA4C1;
  border-left: solid transparent;
  position: absolute;
  z-index: 1;
}
h2.section_title:before {
  width: 62px;
  border-block-width: 35px;
  border-left-width: 17px;
  left: -48px;
  bottom: -25px;
}
h3.insection_title:before {
  width: 52px;
  border-block-width: 30px;
  border-left-width: 14px;
  left: -40px;
  bottom: -20px;
}
h2.section_title:after,
h3.insection_title:after {
  content: "";
  display: inline-block;
  height: 0;
  border-block: solid #FFA4C1;
  border-right: solid transparent;
  position: absolute;
  z-index: 1;
}
h2.section_title:after {
  width: 62px;
  border-block-width: 35px;
  border-right-width: 17px;
  right: -48px;
  bottom: -25px;
}
h3.insection_title:after {
  width: 52px;
  border-block-width: 30px;
  border-right-width: 14px;
  right: -40px;
  bottom: -20px;
}
.title_inner {
  background: #FFB1CA;
  position: relative;
  z-index: 2;
}
h2.section_title .title_inner {
  padding-block: 20px;
}
h3.insection_title .title_inner {
  padding-block: 15px;
}
.title_inner:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-right: solid #EC688D;
  border-bottom: solid transparent;
  position: absolute;
  left: 0;
}
h2.section_title .title_inner:before {
  border-right-width: 31px;
  border-bottom-width: 25px;
  bottom: -25px;
}
h3.insection_title .title_inner:before {
  border-right-width:26px;
  border-bottom-width: 20px;
  bottom: -20px;
}
.title_inner:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: solid #EC688D;
  border-bottom: solid transparent;
  position: absolute;
  right: 0;
}
h2.section_title .title_inner:after {
  border-left-width: 31px;
  border-bottom-width: 25px;
  bottom: -25px;
}
h3.insection_title .title_inner:after {
  border-left-width:26px;
  border-bottom-width: 20px;
  bottom: -20px;
}
h2.section_title .title_inner p {
  display: inline-block;
  padding-inline: 42px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_pink.png) no-repeat left center / 19px auto,url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_pink.png) no-repeat right center / 19px auto;
}
h3.insection_title .title_inner p {
  display: inline-block;
  padding-inline: 32px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_pink.png) no-repeat left center / 16px auto,url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_pink.png) no-repeat right center / 16px auto;
}
.title_inner p .shadow {
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 20px #EF0A6A88;
  rotate: z 0.05deg;
}
h2.section_title .title_inner p .shadow {
  font-size: 24px;
}
h3.insection_title .title_inner p .shadow {
  font-size: 22px;
}
h2.section_title.purple:before,
h2.section_title.purple:after {
  border-top-color: #B986DE;
  border-bottom-color: #B986DE;
}
h2.section_title.purple .title_inner {
  background: #CC99E8;
}
h2.section_title.purple .title_inner:before,
h2.section_title.purple .title_inner:after {
  border-inline-color: #A264D0;
}
h2.section_title.purple .title_inner p {
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_purple.png) no-repeat left center / 19px auto,url(/img/usr/freepage/ptrsuou_kotobukiyashop/hart_purple.png) no-repeat right center / 19px auto;
}
h2.section_title.purple .title_inner p .shadow {
  text-shadow: 0 0 20px #A180B988;
}
.title_catch {
  display: inline-block;
  position: relative;
  color: var(--pink);
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  rotate: z 0.05deg;
}
.title_catch:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 22px;
  background: var(--pink);
  rotate: -40deg;
  position: absolute;
  left: -50px;
  bottom: 0;
}
.title_catch:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 22px;
  background: var(--pink);
  rotate: 40deg;
  position: absolute;
  right: -50px;
  bottom: 0;
}
.section_mv {
  margin-bottom: 32px;
}
.section_lead {
  margin-bottom: 72px;
  text-align: center;
}
.section_lead .subtext {
  font-size: 18px;
  margin-bottom: 16px;
  rotate: z 0.05deg;
}
.section_lead .maintext {
  font-size: 24px;
  font-weight: bold;
  rotate: z 0.05deg;
}
.section_lead .uline {
  position: relative;
}
.section_lead .uline:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #9E84BB;
  position: absolute;
  left: 0;
  bottom: -4px;
  opacity: .3;
}
.section_lead .price_num {
  font-size: 20px;
  font-weight: bold;
}
.section_lead .price_unit {
  font-size: 16px;
  font-weight: bold;
}
.section_lead .price_tax {
  font-size: 12px;
  font-weight: bold;
}
.section_lead .fwbold {
  font-weight: bold;
}
.section_lead .maintext .color {
  font-size: 30px;
}
.section_lead .maintext .color .sub {
  font-size: 18px;
  font-weight: normal;
}
.section_lead .mainnote {
  color: var(--pink);
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
  rotate: z 0.05deg;
}
.section_lead .subnote {
  color: #666;
  font-size: 12px;
  margin-top: 12px;
  rotate: z 0.05deg;
}
.section_content+.section_content {
  margin-top: 72px;
}
.section_content_text {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  rotate: z 0.05deg;
}
.section_content_item {
  text-align: center;
}
.section_content_item .item_name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  rotate: z 0.05deg;
}
.section_content_item .item_img {
  width: min(100%, 722px);
  margin-inline: auto;
}
.section_content_item .item_data {
  font-size: 16px;
  margin-top: 16px;
  rotate: z 0.05deg;
}
.section_content_item .item_note {
  color: #333;
  font-size: 12px;
  margin-top: 9px;
  rotate: z 0.05deg;
}
.section_btn {
  margin-top: 60px;
}
.section_btn a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: min(100%,498px);
  margin-inline: auto;
  padding-block: 27px;
  background: #E95298;
  border-radius: 300px;
  box-shadow: 0 0 30px #E9529888;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  rotate: z 0.05deg;
}
.section_note {
  width: min(100%, 800px);
  margin-top: 80px;
  margin-inline: auto;
}
h3.note_title {
  border-block: 21px solid #FFB1CA;
  border-inline: 10px solid transparent;
  height: 0;
  margin-bottom: 24px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 0;
  text-shadow: 0 0 20px #EF0A6A88;
}
.note_text p {
  color: #666;
  font-size: 12px;
  padding-left: 1em;
  text-indent: -1em;
  rotate: z 0.05deg;
}
.note_text p:before {
  content: "・";
}

.section_product {
  width: min(100%,704px);
  margin-inline: auto;
  text-align: center;
}
.section_product+.section_product {
  margin-top: 80px;
}

.product_title {
  margin-bottom: 20px;
  display: inline-block;
}
.product_title.limited {
  padding-inline: 150px;
  min-height: 65px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/limited.png) no-repeat left center / 97px auto;
}
.product_name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  rotate: z 0.05deg;
}
.product_data {
  font-size: 16px;
  rotate: z 0.05deg;
}
.product_data .tax {
  font-size: 12px;
}
.product_btn {
  margin-top: 28px;
}
.product_btn a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: min(100%,360px);
  margin-inline: auto;
  padding-block: 20px;
  background: #E95298;
  border-radius: 300px;
  box-shadow: 0 0 30px #E9529888;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  rotate: z 0.05deg;
}
.section_footer {
  margin-top: 80px;
  padding-top: 72px;
  background: url(/img/usr/freepage/ptrsuou_kotobukiyashop/wave.png) no-repeat center top / contain;
}
.section_footer .footer_btn a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: min(100%, 498px);
  margin-inline: auto;
  padding-block: 27px;
  background: #EE859D;
  border-radius: 300px;
  box-shadow: 0 0 30px #FDC0CE;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  rotate: z 0.05deg;
}
.section_footer .copy {
  text-align: center;
  margin-top: 28px;
  color: #666;
  font-size: 12px;
  rotate: z 0.05deg;
}

@media only screen and (min-width: 768px) {
  #LPcontent .sp {
    display: none;
  }
  .section_btn a,
  .product_btn a,
  .section_footer .footer_btn a {
    transition: .4s;
    &:hover {
      box-shadow: 0 0 30px transparent;
    }
  }
  .inpagenav ul li a{
    transition: .4s;
    &:hover {
    box-shadow: 0 0 20px #ea68a4;
  }
  }
  .inpagenav ul li.purple a:hover {
    box-shadow: 0 0 20px #ad90cb;
  }
}
@media only screen and (max-width: 767px) {
  #LPcontent {
    padding: 0 24px 80px;
    background-image: url(/img/usr/freepage/ptrsuou_kotobukiyashop/bg_sp.jpg);
  }
  .lightbox{
    translate: 0 calc(50dvh - 50%);
  }
  #mv {
    margin-bottom: 40px;
  }
  #mv h1 {
    margin-inline: -24px;
  }
  #lead {
    margin-bottom: 90px;
  }
  .lead_catch {
    font-size: 28px;
    line-height: 1.8;
    margin-bottom: 24px;
  }
  .lead_catch .color {
    font-size: 32px;
  }
  .lead_text {
    font-size: 24px;
    line-height: 1.8;
    margin-bottom: 68px;
  }
  .inpagenav ul {
    gap: 9px;
  }
  .inpagenav ul li a {
    border-radius: 16px;
    padding-block: 30px 42px;
    font-size: 24px;
  }
  .inpagenav ul li a:before {
    width: 88px;
    height: 72px;
  }
  .inpagenav ul li.limited a:after {
    width: 188px;
    border-block-width: 17px;
    font-size: 14px;
  }
  #LPcontent .section_box {
    border-radius: 40px;
    padding: 48px 24px 80px;
  }
  h2.section_title {
    margin-bottom: 76px;
  }
  h2.section_title .title_inner p,
  h2.section_title.purple .title_inner p {
    padding-inline: 52px;
    background-size: 28px auto;
  }
  h3.insection_title .title_inner p {
    padding-inline: 40px;
    background-size: 22px auto;
  }
  h2.section_title .title_inner p .shadow {
    font-size: 28px;
  }
  h3.insection_title .title_inner p .shadow {
    font-size: 24px;
  }
  .section_lead {
    margin-bottom: 64px;
  }
  .section_lead .subtext {
    font-size: 24px;
    line-height: 1.8;
    margin-bottom: 34px;
  }
  .section_lead .uline:before {
    height: 4px;
  }
  .section_lead .price_num,
  .section_lead .price_unit,
  .section_lead .price_tax {
    font-size: 24px;
    font-weight: bold;
  }
  .section_lead .maintext {
    font-size: 28px;
  }
  .section_lead .maintext .color {
    font-size: 36px;
  }
  .section_lead .maintext .color .sub {
    font-size: 20px;
  }
  .section_lead .mainnote {
    text-align: left;
    font-size: 22px;
    margin-top: 32px;
  }
  .section_lead .subnote {
    color: #666;
    text-align: left;
    font-size: 19px;
    margin-top: 50px;
  }
  .section_content+.section_content {
    margin-top: 64px;
  }
  .section_content_text {
    font-size: 28px;
    line-height: 1.8;
  }
  .section_content_item .item_name {
    font-size: 28px;
    margin-bottom: 24px;
  }
  .section_content_item .item_data {
    font-size: 24px;
    margin-top: 24px;
  }
  .section_content_item .item_note {
    font-size: 20px;
    margin-top: 10px;
  }
  .section_btn {
    margin-top: 50px;
  }
  .section_btn a {
    width: 100%;
    padding-block: 30px;
    font-size: 32px;
  }
  h3.note_title {
    border-block-width: 32px;
    border-inline-width: 20px;
    font-size: 24px;
  }
  .note_text p {
    font-size: 20px;
  }
  .section_product {
    padding-inline: 32px;
  }
  .section_product+.section_product {
    margin-top: 64px;
  }  
  .product_title {
    margin-bottom: 16px;
    display: inline-block;
  }
  .product_title.limited {
    padding-inline: 180px 0;
    min-height: 80px;
    background-size: 120px auto;
  }
  .product_name {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .product_data {
    font-size: 20px;
  }
  .product_data .tax {
    font-size: 16px;
  }
  .product_btn {
    margin-top: 32px;
  }
  .product_btn a {
    width: min(100%, 524px);
    padding-block: 24px;
    font-size: 24px;
  }
  .section_footer {
    margin-top: 64px;
    padding-top: 92px;
    background-image: url(/img/usr/freepage/ptrsuou_kotobukiyashop/wave_sp.png);
  }
  .section_footer .footer_btn a {
    width: 100%;
    padding-block: 30px;
    font-size: 32px;
  }
  .section_footer .copy {
    margin-top: 40px;
    font-size: 20px;
  }
}