@charset "UTF-8";

:root {
  --campaign1-color: #0065FF;
  --campaign2-color: #FF6E9D;
  --campaign3-color: #11B111;
  --campaign4-color: #02A7D4;
  --campaign5-color: #E3B300;
  --campaign6-color: #B19625;
  --campaign7-color: #EF6EEF;
  --campaign8-color: #9469EF;
  --campaign9-color: #FF30A7;
  --campaign10-color: #114E9D;
}

html {
  font-size: .625em;
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 游ゴシック, YuGothic, 'Noto Sans CJK JP', Meiryo, Roboto, sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: 'palt';
}

p {
  line-height: 1.7;
}

img {
  height: auto;
  vertical-align: middle;
  max-width: 100%;
}

.has-text-weight-bold {
  font-weight: 700;
}

.has-text-weight-semibold {
  font-weight: 600;
}

.has-text-centered {
  text-align: center;
}

.has-shadow {
  box-shadow: 3px 5px 8.5px rgba(0, 0, 0, 0.3);
}

.br-sp {
  display: block;
}

.br-pc {
  display: none;
}

.is-hidden-desktop {
  display: block;
}

.is-desktop {
  display: none;
}

@media screen and (min-width: 1280px) {
  .is-hidden-desktop {
    display: none;
  }

  .is-desktop {
    display: block;
  }
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* sp版ヘッダー */
.sp-header {
  background-color: #ffff00;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 62px;
  z-index: 50;
  padding: .5rem 1rem;
  border-bottom: solid 2px #000;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo img {
  width: 106px;
}

.header-button {
  align-items: center;
  display: flex;
  padding-top: 0.4rem;
}

.button-share-sp {
  display: inline-flex;
  background-color: #000;
  color: #fff;
  border-radius: 9999px;
  padding: 0.6rem 1.2rem;
  margin-right: 1.6rem;
  justify-content: center;
  font-size: 1.2rem;
}

.button-share-sp img {
  width: 14px;
}

.overlay {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  background-attachment: fixed;
  background-color: #d9d9d9;
  background-image: url(/images/mansai2025/bg_logo.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 1107px auto;
  overflow-x: hidden;
  transition: 0.25s;
}

.overlay-content {
  padding: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 7%;
}

#menu-open,
#menu-close {
  width: 3rem;
  height: 3rem;
}

#menu-close {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
}

#menu-close:hover {
  opacity: .8;
}

.button-close {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 1279px) {
  #menu-close {
    top: -31px;
    right: 10px;
  }
}

.overlay-content p {
  width: 280px;
  margin: 0 auto 2rem;
}

.overlay-content img {
  display: block;
  max-width: 245px;
  margin: auto;
}

.overlay .nav-wrap {
  margin: auto;
}

.nav-item {
  margin-bottom: 1.8rem;
}

.nav-item .has-shadow {
  border-bottom-left-radius: 5% 20%;
}


/* コンテンツ */

.contents-wrapper {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-color: #d9d9d9;
  background-image: url(/images/mansai2025/bg_logo.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.pc-left-contents,
.pc-right-contents {
  display: none;
}

.main-contents {
  background-color: #fff;
  background-image: url(/images/mansai2025/bg_hougan.png);
  background-size: 15px 15px;
  background-repeat: repeat;
  margin: auto;
  max-width: 640px;
}

.section {
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.section .section {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}


.main-area {
  padding-bottom: 4rem;
  margin-top: 62px;
}

.inner-area {
  padding: 0 2rem;
  margin: auto;
}

/* アニメーション */
/* フェードダウン */
.fade-down {
  opacity: 0;
}

.fade-down.on {
  animation: fade-down-anime .5s ease-in-out forwards;
}

@keyframes fade-down-anime {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ズームイン */
.zoom-in {
  opacity: 0;
}

.zoom-in.on {
  animation: zoom-in-anime .5s ease-in-out forwards;
}

@keyframes zoom-in-anime {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* フェードイン */
.fade-in {
  opacity: 0;
}

.fade-in.on {
  animation: fade-in-anime 1s ease-in-out forwards;
}

@keyframes fade-in-anime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 背景に黒い帯が出る */
.bg-left-anime {
  line-height: 1;
  padding: .4rem .4rem .6rem;
  margin-bottom: .5rem;
  background: #000;
  color: #fff;
  font-weight: 700;
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  position: relative;
}

.bg-left-anime.on {
  animation: bg-left-anime .5s ease-in-out forwards;
}

@keyframes bg-left-anime {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0);
  }
}

/* 左フェードイン */
.fadein-left {
  display: block;
  line-height: initial;
  opacity: 0;
}

.fadein-left.on {
  animation: fadein-left-anime .5s .5s ease-in-out forwards;
}

@keyframes fadein-left-anime {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* アイキャッチ */

.main-line {
  height: 40px;
  width: 100%;
  background-color: #000;
  background-image: url(/images/mansai2025/line.svg);
  background-position: 0 50%;
  background-repeat: repeat-x;
}

@keyframes infinity-scroll-right {
  0% {
    background-position: 0px 50%;
  }

  100% {
    background-position: -1110px 50%;
  }
}

@keyframes infinity-scroll-left {
  0% {
    background-position: 0px 50%;
  }

  100% {
    background-position: 1110px 50%;
  }
}

.main-line.is-top {
  animation: infinity-scroll-right 40s linear 0s infinite;
}

.main-line.is-bottom {
  animation: infinity-scroll-left 40s linear 0s infinite;
}

@media screen and (min-width: 1280px) {
  .wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #d9d9d9;
  }

  .main-line.is-desktop {
    padding-top: 40px;
  }

  .main-line.is-top.is-desktop {
    position: fixed;
    top: 0;
    z-index: 1;
  }

  .main-line.is-bottom.is-desktop {
    position: fixed;
    bottom: 0;
  }
}

.deco-wrapper {
  position: relative
}

.deco-image {
  position: absolute;
}

/* アイキャッチ下　キャンペーン説明文 */

.campaign-description-wrapper {
  padding: 0 4rem;
}

.campaign-description {
  background-image:
    url(/images/mansai2025/bg_team.svg),
    url(/images/mansai2025/bg_cloud.svg),
    url(/images/mansai2025/bg_graph.svg),
    url(/images/mansai2025/bg_exclamation_mark.svg);
  background-position:
    left top,
    right top,
    left bottom,
    right bottom;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 3rem 0;
  text-align: center;
}

.campaign-description .is-title {
  margin-bottom: 2rem;
}

.deco-thumbtack {
  width: 10%;
  top: 4rem;
  right: 0.5rem;
}

@media screen and (min-width: 1280px) {
  .deco-thumbtack {
    width: 14%;
    right: -4rem;
  }
}

/* コーナータイトル */
.is-title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1rem;
  text-align: center;
}

/* 開催中のキャンペーン */

.ongoing .is-title {
  margin-bottom: 3.2rem;
  margin-left: 4.5rem;
  margin-right: 4.5rem;
}

.deco-tape {
  bottom: 0;
  transform: rotate(-12deg);
  left: 0;
  width: 12%;
}

.deco-marker {
  right: 0.5rem;
  top: 2rem;
  width: 9%;
}

.deco-stapler {
  right: -1rem;
  top: 0;
  transform: rotate(21deg);
  width: 12%;
}

@media screen and (min-width: 1280px) {
  .deco-tape {
    bottom: 1rem;
    left: -8rem;
    width: 18%;
  }

  .deco-marker {
    right: -4rem;
    top: -1rem;
    width: 12%;
  }

  .deco-stapler {
    display: none;
  }
}

.ongoing-anchor-list {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

.ongoing-anchor-list li {
  flex: 1 1 30%;
  max-width: min(220px, 30%);
  min-width: 150px;
}

.campaign {
  background-color: #fff;
  border: solid 2px #000;
  margin: 2rem auto 4rem;
  max-width: 350px;
  overflow: visible;
}

.campaign-visual-container {
  position: relative;
  padding-top: min(378px, 100%);
}

.campaign-visual-wrapper {
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  max-width: 378px;
  height: auto;
}

.campaign-visual {
  display: block;
  width: 100%;
  height: auto;
}

.campaign-text-container {
  padding: 2rem;
  min-height: 18rem;
  margin-bottom: 2rem;
  text-align: center;
}


@media screen and (min-width: 1280px) {
  .campaign {
    display: flex;
    max-width: initial;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .campaign-visual-container,
  .campaign-text-container {
    flex: 1;
  }

  .campaign-visual-container {
    padding-top: 0;
  }

  .campaign-visual-wrapper {
    left: -20px;
    width: 100%;
  }

  #campaign_4 .campaign-text-container,
  #campaign_5 .campaign-text-container,
  #campaign_8 .campaign-text-container {
    margin-left: -0.4rem;
    padding-left: 0;
    padding-right: 1.6rem;
  }

  #campaign_4 .campaign-subtitle,
  #campaign_5 .campaign-subtitle,
  #campaign_8 .campaign-subtitle {
    margin-left: -1.2rem;
    margin-right: -1.2rem;
  }

}

.campaign-color1 .bg-left-anime {
  background: var(--campaign1-color);
}

.campaign-color2 .bg-left-anime {
  background: var(--campaign2-color);
}

.campaign-color3 .bg-left-anime {
  background: var(--campaign3-color);
}

.campaign-color4 .bg-left-anime {
  background: var(--campaign4-color);
}

.campaign-color5 .bg-left-anime {
  background: var(--campaign5-color);
}

.campaign-color6 .bg-left-anime {
  background: var(--campaign6-color);
}

.campaign-color7 .bg-left-anime {
  background: var(--campaign7-color);
}

.campaign-color8 .bg-left-anime {
  background: var(--campaign8-color);
}

.campaign-number {
  margin-bottom: 1rem;
}

.campaign-subtitle {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.campaign-period {
  font-weight: 700;
}

.section.list-container {
  margin-bottom: 3rem;
}

.item-list-title {
  font-size: 20px;
  font-weight: 900;
}

.item-list,
.original-picture-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem 2rem;
  margin: 1rem 0;
}

.item-list li:nth-child(n+10) {
  display: none;
}

.item-list.is-open li {
  display: block;
}

.list-button-container {
  margin-top: 3rem;
}

.list-button-container .close-button {
  display: none;
}

.is-open + .list-button-container .open-button {
  display: none;
}

.is-open + .list-button-container .close-button {
  display: inline-flex;
}

.item-image-container,
.item-title,
.item-volume {
  margin-bottom: 0.8rem;
}

.item-image {
  border: solid 1px #000;
}

.item-title {
  font-size: 1.2rem;
  font-weight: 500;
}

.item-volume {
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
}

.read-button {
  font-size: 1.4rem;
  font-weight: 700;
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  background-color: #ff0;
  border: 1px solid #000;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 1);
  display: inline-flex;
  justify-content: center;
  gap: 1rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.read-button > span {
  align-self: center;
  display: inline-block;
}

.read-button .icon-wrapper {
  width: 1.8rem;
  padding-bottom: 0.2rem;
}

.item-volume {
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
  background-color: #fff;
  border: 1px solid #FF0096;
  border-radius: 0.5rem;
  color: #FF0096;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.special-title {
  margin-bottom: 3.2rem;
}

.campaign-card {
  align-items: stretch;
  border: solid 2px #000;
  border-radius: 15px 0 0 15px;
  display: flex;
  margin: 0 auto 1.6rem;
  max-width: 590px;
  text-align: center;
  width: 100%;
}

.campaign-card__logo {
  align-items: center;
  border-radius: 13px 0 0 13px;
  border-right: 2px solid #000;
  color: #fff;
  display: flex;
  font-size: 1.4rem;
  gap: .6rem;
  font-weight: 700;
  flex-basis: 10rem;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  padding: 1rem;
}

.campaign-card__text {
  background-color: #fff;
  flex-grow: 1;
  padding: 1.6rem 0.8rem;
}

.campaign-card__subtitle,
.campaign-card__link {
  font-size: 14px;
  font-weight: 700;
  line-height: calc(20 / 14);
}

.campaign-card__link {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
}

@media screen and (min-width: 1280px) {
  .campaign-card__subtitle,
  .campaign-card__link {
    font-size: 22px;
    line-height: calc(28 / 22);
  }
}

.campaign-card__link .icon-wrapper {
  display: inline-block;
  margin-top: -4px;
  width: 14px;
}

.campaign-color1 .campaign-card__logo {
  background-color: var(--campaign1-color);
}

.campaign-color1 .campaign-card__link {
  color: var(--campaign1-color);
}

.campaign-color2 .campaign-card__logo {
  background-color: var(--campaign2-color);
}

.campaign-color2 .campaign-card__link {
  color: var(--campaign2-color);
}

.campaign-color3 .campaign-card__logo {
  background-color: var(--campaign3-color);
}

.campaign-color3 .campaign-card__link {
  color: var(--campaign3-color);
}

.campaign-color4 .campaign-card__logo {
  background-color: var(--campaign4-color);
}

.campaign-color4 .campaign-card__link {
  color: var(--campaign4-color);
}

.campaign-color5 .campaign-card__logo {
  background-color: var(--campaign5-color);
}

.campaign-color5 .campaign-card__link {
  color: var(--campaign5-color);
}

.campaign-color6 .campaign-card__logo {
  background-color: var(--campaign6-color);
}

.campaign-color6 .campaign-card__link {
  color: var(--campaign6-color);
}

.campaign-color7 .campaign-card__logo {
  background-color: var(--campaign7-color);
}

.campaign-color7 .campaign-card__link {
  color: var(--campaign7-color);
}

.campaign-color8 .campaign-card__logo {
  background-color: var(--campaign8-color);
}

.campaign-color8 .campaign-card__link {
  color: var(--campaign8-color);
}

.campaign-color9 .campaign-card__logo {
  background-color: var(--campaign9-color);
}

.campaign-color9 .campaign-card__link {
  color: var(--campaign9-color);
}

.campaign-color10 .campaign-card__logo {
  background-color: var(--campaign10-color);
}

.campaign-color10 .campaign-card__link {
  color: var(--campaign10-color);
}

.hr {
  border: none;
  height: 9px;
  width: 100%;
  margin: 4rem 0;
  padding: 0;
  background-image: url(/images/mansai2025/partition.svg);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 9px;
  background-position: center;
}

.section .hr {
  margin-left: -1.2rem;
  margin-right: -1.2rem;
  width: calc(100% + 2.4rem);
}

/* プレゼントキャンペーン */
.hr.hr--present {
  left: 0;
  margin-bottom: 0;
  margin-top: 0;
  position: absolute;
  top: -0.3rem;
}

.present-section {
  background-color: #FF009A;
  padding: 4rem 2rem 7rem;
  margin-top: -0.4rem;
}

.present-content {
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 1.2rem;
  padding: 1.2rem;
}

.present-campaign-title {
  margin-bottom: 3.2rem;
  margin-left: 4.5rem;
  margin-right: 4.5rem;
  margin-top: 2rem;
}

.deco-doubleclip {
  width: 14%;
  top: 19rem;
  left: 0.5rem;
}

.deco-stapler2 {
  display: none;
}

@media screen and (min-width: 1280px) {
  .deco-doubleclip {
    left: -4rem;
    top: 33rem;
    width: 16%;
  }

  .deco-stapler2 {
    display: block;
    right: -3.8rem;
    top: -1rem;
    transform: rotate(21deg);
    width: 16%;
  }
}

.present-campaign-description {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 2rem;
  margin-top: 4rem;
  text-align: center;
}

.present-campaign-notes {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
  list-style-type: disc;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  padding-left: 40px;
  width: 24rem;
}

.present-content .bg-left-anime {
  background-color: rgb(255, 253, 84);
  color: #000;
}

.present-campaign {
  margin-bottom: 4rem;
  text-align: center;
}

@media screen and (min-width: 1280px) {
  .present-campaign {
    align-items: center;
    display: flex;
    gap: 1.2rem;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 4.8rem);
  }

  .present-campaign__text-container {
    flex: 1;
  }
}

.present-campaign__title {
  font-size: 2rem;
  font-weight: 700;
}

.present-campaign__period {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}

.present-campaign__description {
  font-weight: 700;
  margin-bottom: 1.4rem;
}

.present-campaign__image {
  border: 1px solid #000;
  max-width: 180px;
}

.present-campaign__application {
  margin-bottom: 4rem;
}

.present-campaign__application-link {
  display: block;
  margin-left: 1.6rem;
  margin-right: 1.6rem;
}

.original-picture-list__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 1rem;
}

.original-picture-thumbnail-container {
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.original-picture-thumbnail-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.original-picture-thumbnail-wrapper {
  position: relative;
}

.original-picture-zoom-button {
  cursor: pointer;
  position: relative;
}

.original-picture-series-title {
  grid-row: 2;
}

.original-picture-thumbnail-container {
  position: relative;
}

.zoomin-wrapper {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  padding: 0.6rem 0.8rem 0.8rem;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.closed-text-wrapper {
  align-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
}

.closed-text {
  max-width: 80%;
}

.original-picture-series-title {
  text-align: center;
  font-size: 1.2rem;
  line-height: calc(18 / 12);
}

@media screen and (min-width: 1280px) {
  .original-picture-series-title {
    font-size: 1.4rem;
  }
}

/* 今後の開催予定 */
.upcoming-title {
  margin-bottom: 3.2rem;
  margin-left: 8rem;
  margin-right: 8rem;
}

.hr.hr--upcoming {
  left: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  position: absolute;
  top: -4.4rem;
  width: 100%;
}

.deco-pin {
  top: -1rem;
  left: 0.5rem;
  width: 14%;
}

.deco-binder {
  right: 4rem;
  top: -12rem;
  transform: rotate(12deg);
  width: 14%;
}

@media screen and (min-width: 1280px) {
  .deco-pin {
    left: -4rem;
    top: -3rem;
  }

  .deco-binder {
    right: -3.8rem;
    top: -9rem;
  }
}

/* 下記のキャンペーンは終了しました */
.past-title {
  margin-bottom: 3.2rem;
  margin-left: 6.6rem;
  margin-right: 6.6rem;
}

.deco-silverclip,
.deco-clip {
  display: none;
}

@media screen and (min-width: 1280px) {
  .past-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 37.8rem;
  }

  .deco-silverclip {
    display: block;
    top: 4rem;
    left: -6.5rem;
    transform: rotate(-20deg);
    width: 16%;
  }

  .deco-clip {
    display: block;
    right: -2.5rem;
    top: 0.5rem;
    width: 11%;
  }
}

.past-campaign-list {
  display: grid;
  font-size: 1.2rem;
  font-weight: 500;
  gap: 2.4rem 1.2rem;
  grid-template-columns: 1fr 1fr;
  line-height: calc((16 / 12));
}

.past-campaign-list__image {
  border: 1px solid #000;
  display: block;
  margin-bottom: 0.8rem;
}

.past-campaign-list__subtitle {
  font-weight: 700;
  margin-bottom: 0.8rem;
}

/* キャンペーン開催中のネット書店一覧 */
.store-title {
  margin-bottom: 3.2rem;
  margin-left: 5.5rem;
  margin-right: 5.5rem;
}

.deco-silverclip2 {
  top: 1rem;
  left: 0.5rem;
  transform: rotate(-20deg);
  width: 16%;
}

.deco-clip2 {
  right: 1rem;
  top: 0.5rem;
  width: 11%;
}

.deco-pen {
  display: none;
}

@media screen and (min-width: 1280px) {
  .deco-silverclip2 {
    display: none;
  }

  .deco-clip2 {
    display: none;
  }

  .deco-pen {
    display: block;
    right: -2rem;
    top: -2rem;
    width: 14%;
  }
}

.store-description {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: calc(26 / 14);
  margin-bottom: 1.6rem;
}

.store-ecomi {
  margin-bottom: 1rem;
}

/* キャンペーン実施中のネット書店一覧 */

.store-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.button-store {
  border: solid 1px #9a9a9a;
  border-radius: 10px;
}


/* フッター */

.footer {
  background-color: #000;
  color: #fff;
  padding: 3rem 0;
}

.footer a {
  color: #fff;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}

.footer-nav li {
  margin: 0 1rem 1rem 1rem;
}

.link-sgk {
  display: block;
  border: 1px solid #fff;
  padding: .5rem;
  margin: 1rem auto 2rem;
  max-width: 70px;
  text-align: center;
}

.copy-text {
  font-size: 1rem;
  text-align: center;
}

@media screen and (min-width: 1280px) {

  /* sp版ヘッダー */
  .sp-header,
  .overlay {
    display: none;
  }

  .main-area {
    margin-top: 0;
  }

  .contents-wrapper {
    display: flex;
  }

  .pc-left-contents {
    width: calc((100% - 640px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pc-right-contents {
    width: calc((100% - 640px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pc-logo {
    max-width: 400px;
    width: 100%;
    padding: 0 2rem;
  }

  .pc-logo img {
    display: block;
    width: 100%;
  }

  .pc-menu {
    max-width: 470px;
    padding: 0 4rem;
  }

  .nav-wrap li {
    margin-bottom: 4rem;
    transition-duration: 0.2s
  }

  .nav-wrap li:hover {
    transform: scale(1.1);
  }

  .main-contents {
    max-width: 640px;
    margin: auto;
  }
}

@media screen and (min-width: 640px) {

  body {
    font-size: 1.6rem;
  }

  .br-sp {
    display: none;
  }

  .br-pc {
    display: block;
  }

  /* コンテンツ */

  .main-area {
    border-right: 4px solid #000;
    border-left: 4px solid #000;
  }

  .header-nav li:not(:first-child) {
    margin-left: 20px;
  }

  /* 開催中のキャンペーン */
  .campaign-number {
    font-size: 2rem;
  }

  /* キャンペーン実施中のネット書店一覧 */

  .store-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
}

@media screen and (min-width:480px) and (max-width:639px) {
  /* アイキャッチ下　キャプション */
  .about-area {
    background-size: 110%;
  }
}

.mansai2025-closed .main-contents {
  width: 640px;
  max-width: 100%;
}

.mansai2025-closed .main-area {
  margin-top: 0;
  padding-bottom: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 12rem;
  min-height: 100vh;
}

.big-button {
  aspect-ratio: 331 / 56;
  display: inline-flex;
  justify-content: center;
  background-image: url(/images/mansai2025/button_mobile.svg);
  background-size: contain;
  background-repeat: no-repeat;
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
  gap: 1rem;
  max-width: 100%;
  padding-bottom: 0.6rem;
  width: 331px;
}

.big-button:hover {
  cursor: pointer;
}

.big-button .icon-wrapper {
  padding-bottom: 0.2rem;
}

.big-button > span {
  align-self: center;
  display: inline-block;
}

@media screen and (min-width: 1280px) {
  .mansai2025-closed .wrapper {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #d9d9d9;
  }

  .big-button {
    aspect-ratio: 406 / 86;
    background-image: url(/images/mansai2025/button_desktop.svg);
    font-size: 2rem;
    font-weight: 700;
    width: 406px;
  }
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: none;
}

.picture-modal-content {
  padding: 20px;
  position: relative;
}

.zoomed-image {
  display: block;
  margin: 0 auto;
  width: 90%;
}

.close-modal-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  width: 38px;
}

@media screen and (min-width: 1280px) {
  .close-modal-btn {
    width: 50px;
  }
}

#overlay.visible {
  display: flex;
  justify-content: center;
  align-items: center;
}