@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
/*-- reset --*/
html {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
figure {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-weight: normal;
  font-size: inherit;
}
ul, ol {
  margin: 0;
  padding-left: 0;
}
ul li, ol li {
  margin-left: 0;
  list-style-type: none;
}
dl, dt, dd {
  margin: 0;
  padding: 0;
}
a img {
  border: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
img {
  line-height: 1;
}
hr {
  border: none;
  margin: 0;
  padding: 0;
}
button {
  line-height: inherit;
  margin: 0px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
input {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea {
  border: none;
  -webkit-border-image: none;
  border-image: none;
  resize: none;
}
table {
  border-collapse: collapse;
  border: 0px;
}
html {
  overflow-x: hidden;
  width: 100%;
  line-height: 2;
}
body {
  position: relative;
  color: #333;
  background: #fff !important;
  font-family: "Noto Serif JP", serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  letter-spacing: .05em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*==========================================

 PC & ALL

==========================================*/
body, td, th {
    font-size: 16px;
    line-height: 1.6;
}
.main {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 120px;
}
.main img {
    width: 100%;
    vertical-align: top;
}
.mv-lead {
    margin-top: 24px;
    padding-bottom: 60px;
    font-size: 22px;
    letter-spacing: .1em;
    text-align: center;
    background: url("../img/bg-deco-line.png") no-repeat bottom center / 366px auto;
}
.contents {
    margin-top: 60px;
}
.contents h2, .contents h3 {
    font-size: 26px;
}
.contents p + p {
    margin-top: 1em;
}
/* .item01 */
.item01 {
    padding-bottom: 40px;
    background-image: url("../img/bg-deco-frame-l_pc.png"), url("../img/bg-deco-frame-r_pc.png");
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    background-size: contain;
}
.item01 h2 {
    font-weight: bold;
    text-align: center;
}
.item01 .content-item-note {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.item01 .content-item-note-txt {
    width: 330px;
    flex-shrink: 0;
}
.item01 .content-item-note-txt .name {
    text-align: right;
}
.item01 .content-item-note-img {
    margin-top: 20px;
    width: 315px;
    flex-shrink: 0;
}
/* .item02 */
.item02 .contents-item-inner {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.item02 .contents-item-note {
    order: 2;
    width: 485px;
    flex-shrink: 0;
}
.item02 .contents-item-note-txt {
    margin-top: 1em;
}
.item02 .contents-item-img {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.item02 h3 {
    order: 2;
    margin-top: .5em;
    text-align: center;
}
/* .item03 */
.item03 {
    margin-top: 60px;
}
.item03 .contents-item-inner {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.item03 .content-item-note {
    width: 500px;
    flex-shrink: 0;
}
.item03 .content-item-note-txt {
    margin-top: 1em;
}
.item03 .content-item-img {
    width: 300px;
    flex-shrink: 0;
    margin-top: 40px;
}
/* .music */
.music {
    margin-top: 80px;
    font-size: 11px;
    text-align: center;
}
.music h2 {
    font-weight: bold;
}
.music-player {
    width: 220px;
    margin: 16px auto 0;
    cursor: pointer;
}
.music-character {
    width: 200px;
    margin: 5px auto 0;
}
@media screen and (min-width: 769px), print {
    .music-player {
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .music-player:hover {
        opacity: .6;
    }
    .u-none--pc {
        display: none !important;
    }
}
/*==========================================

 SP

==========================================*/
@media screen and (max-width: 768px) {
    body, td, th {
        font-size: calc((14 / 390) * 100vw);
    }
    .main {
        padding-bottom: calc((60 / 390) * 100vw);
    }
    .mv-lead {
        margin-top: calc((16 / 390) * 100vw);
        padding-bottom: calc((30 / 390) * 100vw);
        font-size: calc((12 / 390) * 100vw);
        background-size: calc((165 / 390) * 100vw) auto;
    }
    .contents {
        margin-top: calc((40 / 390) * 100vw);
    }
    .contents h2, .contents h3 {
        font-size: calc((18 / 390) * 100vw);
    }
    /* .item01 */
    .item01 {
        padding-top: calc((24 / 390) * 100vw);
        padding-bottom: calc((40 / 390) * 100vw);
        background-image: url("../img/bg-deco-frame-l_sp.png"), url("../img/bg-deco-frame-r_sp.png");
        background-position: left calc((8 / 390) * 100vw) top, right calc((8 / 390) * 100vw) bottom;
        background-size: calc((60 / 390) * 100vw) auto;
    }
    .item01 .content-item-note {
        margin-top: calc((16 / 390) * 100vw);
        flex-direction: column;
        align-items: center;
    }
    .item01 .content-item-note-txt {
        order: 2;
        width: calc((300 / 390) * 100vw);
        margin-top: calc((16 / 390) * 100vw);
    }
    .item01 .content-item-note-img {
        margin-top: 0;
        width: calc((280 / 390) * 100vw);
    }
    /* .item02 */
    .contents.member {
        width: calc((345 / 390) * 100vw);
        margin-left: auto;
        margin-right: auto;
    }
    .item02 .contents-item-inner {
        flex-direction: column;
        align-items: center;
        gap: normal;
    }
    .item02 .contents-item-note {
        display: contents;
        width: 100%;
    }
    .item02 h2 {
        order: 1;
    }
    .item02 .contents-item-note-txt {
        order: 3;
        width: calc((330 / 390) * 100vw);
    }
    .item02 .contents-item-img {
        order: 2;
        width: calc((200 / 390) * 100vw);
        margin-top: calc((24 / 390) * 100vw);
    }
    /* .item03 */
    .item03 {
        margin-top: calc((40 / 390) * 100vw);
    }
    .item03 .contents-item-inner {
        flex-direction: column;
        align-items: center;
        gap: calc((16 / 390) * 100vw);
    }
    .item03 .content-item-note {
        width: 100%;
    }
    .item03 .content-item-img {
        width: calc((300 / 390) * 100vw);
        margin-top: 0;
    }
    /* .music */
    .music {
        margin-top: calc((40 / 390) * 100vw);
        font-size: calc((11 / 390) * 100vw);
    }
    .music p {
        margin-top: .5em;
    }
    .music-player {
        width: calc((200 / 390) * 100vw);
        margin: calc((16 / 390) * 100vw) auto 0;
    }
    .music-character {
        width: calc((180 / 390) * 100vw);
    }
    .u-none--sp {
        display: none !important;
    }
}