@import url("/css/1.0.0/base.css");

@media screen and (min-width: 834px) {
  section.ptn31-magazine .container {
    padding-bottom: 3.0rem;
  }
  section.ptn31-magazine .magazine-block {
    max-width: 120.0rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-top: 3.2rem;
    margin-bottom: 11.5rem;
  }
  section.ptn31-magazine .magazine-block .image {
    background: #f3f3f3;
    border-radius: 1.5rem 1.5rem 0 1.5rem;
    width: 60.0rem;
    padding: 3.0rem 0;
  }
  section.ptn31-magazine .magazine-block .image img {
    display: block;
    width: 39.0rem;
    height: auto;
    margin: 0 auto;
  }
  section.ptn31-magazine .magazine-block .content {
    width: 51.0rem;
  }
  section.ptn31-magazine .magazine-block .content .title {
    font-size: 2.9rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    margin-bottom: 1.1rem;
    line-height: 1.5;
  }
  section.ptn31-magazine .magazine-block .content .author {
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
    display: inline-block;
  }
  section.ptn31-magazine .magazine-block .content .lead {
    font-feature-settings: "palt";
    border-top: solid 1px #666;
    padding-top: 3.5rem;
    margin-top: 4.0rem;
    margin-bottom: 5.2rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    font-size: 1.5rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dt {
    width: 10.0rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    margin-bottom: 0.2rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dd {
    width: calc(100% - 10.0rem);
    margin-bottom: 0.2rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dd.price {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
  }
  section.ptn31-magazine .magazine-block .content .buttons {
    margin-top: 4.0rem;
  }
  section.ptn31-magazine .magazine-block .content .buttons .c-button {
    width: 100%;
    min-width: inherit;
    margin: 0 0 2.3rem 0;
    transition: opacity 200ms 0s ease;
  }
  section.ptn31-magazine .magazine-block .content .buttons .c-button:hover {
    opacity: 0.6;
  }
  section.ptn31-magazine .magazine-block .content .link {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    margin-top: 5.5rem;
    margin-right: -1.0rem;
  }
  section.ptn31-magazine .magazine-block .content .link li {
    display: block;
    margin-bottom: 1.0rem;
    margin-right: 1.0rem;
    width: calc(100% / 5 - 1.0rem);
  }
  section.ptn31-magazine .magazine-block .content .link li a {
    display: block;
    border: solid 1px #222;
    color: #222;
    background: #fff;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 200ms 0s ease;
  }
  section.ptn31-magazine .magazine-block .content .link li a:hover {
    opacity: 0.6;
  }
  section.ptn31-magazine .magazine-block .content .link li a.black {
    color: #fff;
    background: #222;
  }
  section.ptn31-magazine .magazine-block .content .c-sns {
    margin-top: 4.9rem;
  }
  section.ptn31-magazine .magazine-detail {
    max-width: 120.0rem;
    margin: 0 auto;
    margin-top: 5.5rem;
    margin-bottom: 17.5rem;
  }
  section.ptn31-magazine .magazine-detail p {
    margin-bottom: 4.3rem;
  }
  section.ptn31-magazine .list-logo {
    max-width: 120.0rem;
    margin: 0 auto;
    margin-top: 4.0rem;
    margin-bottom: 16.8rem;
  }
  section.ptn31-magazine .list-logo:last-child {
    margin-bottom: 0rem;
  }
  section.ptn31-magazine .list-logo ul {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    margin-right: -5.2rem;
  }
  section.ptn31-magazine .list-logo li {
    margin: 0 5.2rem 0 0;
    margin-bottom: 3.4rem;
    width: 19.8rem;
    aspect-ratio: 1/1;
  }
  section.ptn31-magazine .list-logo li a {
    display: block;
    position: relative;
    text-decoration: none;
    font-size: 2.0rem;
    width: 100%;
    height: 100%;
    padding: 1.7rem;
    border: solid 1px #222;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem 1.5rem 0 1.5rem;
    transition: box-shadow 200ms 0s ease;
  }
  section.ptn31-magazine .list-logo li a:before {
    content: "";
    display: block;
    width: 1.0rem;
    height: 1.0rem;
    border-right: solid 0.2rem #222;
    border-bottom: solid 0.2rem #222;
    position: absolute;
    bottom: 1.0rem;
    right: 1.0rem;
  }
  section.ptn31-magazine .list-logo li a:hover {
    box-shadow: -0.4rem -0.3rem 0 0 #ccc;
  }
  section.ptn31-magazine .list-logo li a img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 833px) {
  section.ptn31-magazine .container {
    padding-bottom: 16.0rem;
  }
  section.ptn31-magazine .magazine-block {
    padding-top: 3.0rem;
    margin-bottom: 26.0rem;
  }
  section.ptn31-magazine .magazine-block .image {
    background: #f3f3f3;
    margin: 0 -3.0rem;
    padding: 3.0rem 0;
    margin-bottom: 5.0rem;
  }
  section.ptn31-magazine .magazine-block .image img {
    display: block;
    width: 39.0rem;
    height: auto;
    margin: 0 auto;
  }
  section.ptn31-magazine .magazine-block .content {
  }
  section.ptn31-magazine .magazine-block .content .title {
    font-size: 3.8rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    margin-bottom: 2.7rem;
    line-height: 1.5;
  }
  section.ptn31-magazine .magazine-block .content .author {
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
    display: inline-block;
  }
  section.ptn31-magazine .magazine-block .content .lead {
    font-feature-settings: "palt";
    border-top: solid 1px #999;
    padding-top: 4.0rem;
    margin-top: 5.7rem;
    margin-bottom: 7.8rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-top: 5.1rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dt {
    width: 19.0rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    margin-bottom: 1.5rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dd {
    width: calc(100% - 19.0rem);
    margin-bottom: 1.5rem;
  }
  section.ptn31-magazine .magazine-block .content dl.detail dd.price {
    font-size: 3.0rem;
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
  }
  section.ptn31-magazine .magazine-block .content .buttons {
    max-width: 55.0rem;
    margin: 0 auto;
    margin-top: 6.0rem;
  }
  section.ptn31-magazine .magazine-block .content .buttons .c-button {
    width: 100%;
    min-width: inherit;
    margin: 0 0 4.8rem 0;
  }
  section.ptn31-magazine .magazine-block .content .link {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 9.8rem;
    padding: 0 1.0rem 0 0.7rem;
    margin-right: -1.0rem;
  }
  section.ptn31-magazine .magazine-block .content .link li {
    display: block;
    margin-bottom: 1.0rem;
    margin-right: 1.0rem;
    width: calc(100% / 3 - 1.0rem);
  }
  section.ptn31-magazine .magazine-block .content .link li a {
    display: block;
    border: solid 1px #222;
    color: #222;
    background: #fff;
    padding: 0.3rem 1.0rem;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section.ptn31-magazine .magazine-block .content .link li a.black {
    color: #fff;
    background: #222;
  }
  section.ptn31-magazine .magazine-block .content .c-sns {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10.1rem;
    padding: 0 1.0rem 0 0.7rem;
  }
  section.ptn31-magazine .magazine-detail {
    max-width: 120.0rem;
    margin: 0 auto;
    margin-top: 5.5rem;
    margin-bottom: 20.0rem;
  }
  section.ptn31-magazine .magazine-detail p {
    margin-bottom: 7.8rem;
  }
  section.ptn31-magazine .list-logo {
    margin-top: 6.7rem;
    margin-bottom: 16.8rem;
    padding: 0 3.6rem 0 2.8rem;
  }
  section.ptn31-magazine .list-logo:last-child {
    margin-bottom: 0rem;
  }
  section.ptn31-magazine .list-logo ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  section.ptn31-magazine .list-logo li {
    margin: 0;
    margin-bottom: 4.2rem;
    width: 28.4rem;
    height: 18.0rem;
  }
  section.ptn31-magazine .list-logo li a {
    display: block;
    position: relative;
    text-decoration: none;
    font-size: 2.0rem;
    width: 100%;
    height: 100%;
    padding: 2.0rem;
    border: solid 1px #222;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem 1.5rem 0 1.5rem;
  }
  section.ptn31-magazine .list-logo li a:before {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.4rem;
    border-right: solid 0.2rem #222;
    border-bottom: solid 0.2rem #222;
    position: absolute;
    bottom: 1.3rem;
    right: 1.5rem;
  }
}

section.ptn31-magazine .magazine-detail section.youtube-section {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2.0rem 2.0rem 0 2.0rem;
}
section.ptn31-magazine .magazine-detail section.youtube-section iframe {
  width: 100%;
  height: 100%;
}



.modal {
  display: none;
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__container {
  position: relative;
  background-color: #fff;
  margin: 0 1.0rem;
  max-width: 60.0rem;
  max-height: calc(100dvh - 4.0rem);
  width: 80%;
  border-radius: 1.5rem 1.5rem 0 1.5rem;
  overflow-y: hidden;
}
.modal__close {
  background: transparent;
  border: 0;
  display: block;
  position: absolute;
  top: 2.1rem;
  right: 2.2rem;
  width: 1.5rem;
  height: 1.5rem;
  background: url(/img/ptn03_icon_close.webp) 0 0/100% auto no-repeat;
  transition: opacity 200ms 0s ease;
}
.modal__close:hover {
  opacity: 0.6;
}
@media screen and (min-width: 834px) {
  .modal__container {
    height: 85.0rem;
    padding: 5.0rem 0 4.0rem 0;
  }
}
@media screen and (max-width: 833px) {
  .modal__container {
    padding: 7.0rem 0 5.0rem 0;
    height: calc(100dvh - 1.0rem);
    width: 95%;
    max-width: unset;
  }
  .modal__close {
    top: 3.3rem;
    right: 3.3rem;
    width: 3.0rem;
    height: 3.0rem;
  }
}


@media screen and (min-width: 834px) {
  section.modal-section {
    overflow-y: auto;
    height: 100%;
    padding: 0 4.0rem;
  }
  section.modal-section .author-block {
  }
  section.modal-section .wrap {
  }
  section.modal-section .name {
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    font-size: 2.0rem;
    margin-bottom: 3.0rem;
  }
  section.modal-section .desc {
  }
  section.modal-section .desc p {
    margin-bottom: 2.0rem;
  }
  section.modal-section .year {
    text-align: right;
    font-size: 1.5rem;
    padding-right: 1.0rem;
  }
}
@media screen and (max-width: 833px) {
  section.modal-section {
    overflow-y: auto;
    height: 100%;
    padding: 0rem 5.0rem;
  }
  section.modal-section .author-block {
  }
  section.modal-section .wrap {
  }
  section.modal-section .name {
    font-weight: bold;
    font-family: TsukuGoPro-B-HelveticaNowTextMedium, 'Noto Sans JP';
    font-size: 3.0rem;
    margin-bottom: 3.0rem;
  }
  section.modal-section .desc {
    font-size: 3.0rem;
  }
  section.modal-section .desc p {
    margin-bottom: 2.0rem;
  }
  section.modal-section .year {
    text-align: right;
    font-size: 2.6rem;
    padding-right: 1.0rem;
  }
}

@media screen and (min-width: 834px) {
  #online,
  #zaiko,
  #digital {
    margin-top: -7.0rem;
    padding-top: 7.0rem;
  }
}
@media screen and (max-width: 833px) {
}

/* 追記: 書籍詳細で動画(movie_urls)が複数ある場合、youtube-section同士が密着するため間隔を空ける */
section.ptn31-magazine .magazine-detail section.youtube-section + section.youtube-section {
  margin-top: 2.0rem;
}

/* 追記: SPのみ原本に align-items:center があるため、ラベルの長さが違うと行内でボタンの高さと上下位置が揃わない。
   PCは未指定(=stretch)で自動的に揃うので、SPもそれに合わせる（雑誌 ptn19.css と同一の対処）。
   ラベルが全て1行なら見た目は変わらず、長いラベルが混ざった行だけ高さが揃う */
@media screen and (max-width: 833px) {
  section.ptn31-magazine .magazine-block .content .link {
    align-items: stretch;
  }
}

/* 追記: 原本がボタンの高さを決めていないため、ラベルの文字数で厚みが変わってしまう（1行=27px / 2行=48px）。
   デザイン上の不具合として高さの下限を固定する。
   SPは rem の基準が5px（PCは10px）で 4.8rem が24pxにしかならず効かないうえ、
   原本の26pxはタップターゲットの最低推奨44pxを下回るため、SPは別途指定する */
section.ptn31-magazine .magazine-block .content .link li a {
  min-height: 4.8rem;
}
@media screen and (max-width: 833px) {
  section.ptn31-magazine .magazine-block .content .link li a {
    min-height: 8.8rem;
  }
}