@media screen and (min-width: 768px) {
  .page-detail .wrapper {
    padding-top: 220px;
    padding-inline: 5.29%;
  }
  .page-detail .wrapper__top {
    margin-inline: auto;
    padding-inline: 60px;
    max-width: 1400px;
  }
  .page-detail .ttl__sub {
    font-family: "Sulphur Point", sans-serif;
    font-size: 17px;
    letter-spacing: 0.04em;
  }
  .page-detail .ttl__sub span {
    position: relative;
    top: -2px;
  }
  .page-detail .ttl__main {
    margin-top: 26px;
    font-family: "Figtree", "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 42px;
    letter-spacing: 0.12em;
  }
  .page-detail .outline {
    display: flex;
    align-items: flex-start;
    -moz-column-gap: 11.42%;
         column-gap: 11.42%;
    margin-top: 110px;
  }
  .page-detail .outline__list {
    display: grid;
    row-gap: 26px;
    flex-shrink: 0;
    margin-top: 7px;
    width: 35.97%;
  }
  .page-detail .outline__list-line {
    display: flex;
  }
  .page-detail .outline__list-ttl {
    flex-shrink: 0;
    position: relative;
    top: 1px;
    width: 65px;
    font-family: "Sulphur Point", "Zen Kaku Gothic New", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .page-detail .outline__list-ttl span {
    position: relative;
    top: -2px;
  }
  .page-detail .outline__list-data {
    margin-left: 30px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.16em;
  }
  .page-detail .outline__text {
    font-size: 15px;
    line-height: 2.27;
    letter-spacing: 0.14em;
  }
  .page-detail .contentsbox {
    display: grid;
    row-gap: 90px;
    margin-top: 80px;
  }
  .page-detail .content__imgbox {
    border: 1px solid #E9E9E9;
  }
  .page-detail .content__imgbox img {
    width: 100%;
  }
  .page-detail .content__videobox {
    position: relative;
    cursor: pointer;
  }
  .page-detail .content__videobox::before {
    content: "Play";
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 9.9206349206vw;
    height: 9.9206349206vw;
    border-radius: 50%;
    border: 2px solid #fff;
    font-family: "Figtree", sans-serif;
    font-size: 1.455026455vw;
    letter-spacing: 0.06em;
    text-align: center;
    color: #fff;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
    pointer-events: auto;
  }
  .page-detail .content__videobox video {
    width: 100%;
  }
  .page-detail .content__videobox video::-webkit-media-controls {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .page-detail .content__videobox:hover::before {
    opacity: 0.6;
  }
  .page-detail .content__videobox.js-played::before {
    opacity: 0;
    pointer-events: none;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .page-detail .content__text {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 2.43;
    letter-spacing: 0.14em;
  }
  .page-detail .page-copyright {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.14em;
    font-family: "Figtree", sans-serif;
  }
  .page-detail .btn {
    margin-top: 80px;
    text-align: center;
  }
  .page-detail .btn__link {
    display: inline-block;
    position: relative;
    font-family: "Sulphur Point", sans-serif;
    font-size: min(2.1825396825vw, 33px);
    letter-spacing: 0.02em;
  }
  .page-detail .btn__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * min(2.3148148148vw, 35px));
    translate: 0 -50%;
    width: min(0.8597883598vw, 13px);
    height: min(0.8597883598vw, 13px);
    background-image: url("../images/icon_arrow_green.svg");
    background-repeat: no-repeat;
    background-size: contain;
    scale: -1 1;
    transition: left 0.2s linear;
  }
  .page-detail .btn__link:hover::before {
    left: calc(-1 * min(2.7116402116vw, 41px));
  }
  .page-detail .bottom {
    margin-top: 90px;
  }
  .page-detail .band {
    margin-top: 80px;
  }
  .page-detail .footer {
    margin-top: 50px;
  }
}
@media screen and (max-width: 767px) {
  .page-detail .wrapper {
    display: grid;
    padding-top: 38.4615384615vw;
    padding-inline: 5.1282051282vw;
  }
  .page-detail .wrapper__top {
    display: contents;
  }
  .page-detail .ttl {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .page-detail .ttl__sub {
    font-family: "Sulphur Point", sans-serif;
    font-size: 4.358974359vw;
    letter-spacing: 0.04em;
  }
  .page-detail .ttl__sub span {
    position: relative;
    top: -0.5128205128vw;
  }
  .page-detail .ttl__main {
    margin-top: 5.641025641vw;
    font-family: "Figtree", "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 7.6923076923vw;
    letter-spacing: 0.1em;
  }
  .page-detail .outline {
    display: grid;
    grid-column: 1/2;
    grid-row: 3/4;
    margin-top: 12.8205128205vw;
  }
  .page-detail .outline__list {
    grid-column: 1/2;
    grid-row: 2/3;
    display: grid;
    row-gap: 4.358974359vw;
    margin-top: 12.8205128205vw;
  }
  .page-detail .outline__list-line {
    display: flex;
  }
  .page-detail .outline__list-ttl {
    flex-shrink: 0;
    position: relative;
    top: 0.5128205128vw;
    width: 16.6666666667vw;
    font-family: "Sulphur Point", "Zen Kaku Gothic New", sans-serif;
    font-size: 4.358974359vw;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.04em;
  }
  .page-detail .outline__list-ttl span {
    position: relative;
    top: -0.5128205128vw;
  }
  .page-detail .outline__list-data {
    margin-left: 4.1025641026vw;
    font-size: 3.5897435897vw;
    line-height: 1.7;
    letter-spacing: 0.1em;
  }
  .page-detail .outline__text {
    grid-column: 1/2;
    grid-row: 1/2;
    font-size: 3.5897435897vw;
    line-height: 2.43;
    letter-spacing: 0.14em;
  }
  .page-detail .contentsbox {
    grid-column: 1/2;
    grid-row: 2/3;
    display: grid;
    row-gap: 10.2564102564vw;
    margin-top: 10.2564102564vw;
  }
  .page-detail .content__imgbox {
    border: 1px solid #E9E9E9;
  }
  .page-detail .content__imgbox img {
    width: 100%;
  }
  .page-detail .content__videobox {
    position: relative;
  }
  .page-detail .content__videobox::before {
    content: "";
    display: block;
    width: 100%;
    height: 98%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .page-detail .content__videobox::after {
    content: "Play";
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 24.3333333333vw;
    height: 24.3333333333vw;
    border-radius: 50%;
    border: 1px solid #fff;
    font-family: "Figtree", sans-serif;
    font-size: 5vw;
    letter-spacing: 0.06em;
    text-align: center;
    color: #fff;
    opacity: 1;
    transition: opacity 0.2s;
    pointer-events: auto;
  }
  .page-detail .content__videobox video {
    width: 100%;
  }
  .page-detail .content__videobox video::-webkit-media-controls {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .page-detail .content__videobox video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  .page-detail .content__videobox.js-played::before {
    display: none;
  }
  .page-detail .content__videobox.js-played::after {
    opacity: 0;
    pointer-events: none;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls-start-playback-button {
    display: block !important;
    -webkit-appearance: button;
  }
  .page-detail .content__text {
    margin-bottom: 3.0769230769vw;
    font-size: 3.5897435897vw;
    line-height: 1.8;
    letter-spacing: 0.14em;
    text-align: justify;
  }
  .page-detail .page-copyright {
    grid-column: 1/2;
    grid-row: 4/5;
    margin-top: 5.1282051282vw;
    font-size: 3.0769230769vw;
    line-height: 1.8;
    letter-spacing: 0.14em;
    font-family: "Figtree", sans-serif;
  }
  .page-detail .btn {
    grid-column: 1/2;
    grid-row: 5/6;
    margin-top: 20.5128205128vw;
    text-align: center;
  }
  .page-detail .btn__link {
    display: inline-block;
    position: relative;
    left: 0.7692307692vw;
    font-family: "Sulphur Point", sans-serif;
    font-size: 4.8717948718vw;
    letter-spacing: 0.02em;
  }
  .page-detail .btn__link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5.1282051282vw;
    translate: 0 -50%;
    width: 2.8205128205vw;
    height: 2.8205128205vw;
    background-image: url("../images/icon_arrow_green.svg");
    background-repeat: no-repeat;
    background-size: contain;
    scale: -1 1;
  }
  .page-detail .bottom {
    margin-top: 20.5128205128vw;
  }
  .page-detail .band {
    margin-top: 20.5128205128vw;
  }
  .page-detail .footer {
    margin-top: 12.8205128205vw;
  }
}
@media screen and (min-width: 768px) {
  .page-detail .content__videobox video::-webkit-media-controls {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .page-detail .content__videobox video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls-start-playback-button {
    display: block !important;
    -webkit-appearance: button !important;
  }
}
@media screen and (max-width: 767px) {
  .page-detail .content__videobox video::-webkit-media-controls {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .page-detail .content__videobox video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .page-detail .content__videobox.js-played video::-webkit-media-controls-start-playback-button {
    display: block !important;
    -webkit-appearance: button !important;
  }
}/*# sourceMappingURL=detail.css.map */