/* -------sns icon--------- */

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "sns_icon";

  src: url("../font/sns_icon.eot?hf355k");
  src:
    url("../font/sns_icon.eot?hf355k#iefix") format("embedded-opentype"),
    url("../font/sns_icon.ttf?hf355k") format("truetype"),
    url("../font/sns_icon.woff?hf355k") format("woff"),
    url("../font/sns_icon.svg?hf355k#sns_icon") format("svg");
}

i.snsIcon {
  text-transform: none;
  color: #000;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: "sns_icon" !important;

  line-height: 1;

  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-ap:before {
  content: "\e900";
}
.icon-blo:before {
  content: "\e901";
}
.icon-fb:before {
  content: "\e902";
}
.icon-hp:before {
  content: "\e903";
}
.icon-in:before {
  content: "\e904";
}
.icon-line:before {
  content: "\e905";
}
.icon-spo:before {
  content: "\e906";
}
.icon-tt:before {
  content: "\e907";
}
.icon-tw:before {
  content: "\e908";
}
.icon-yt:before {
  content: "\e909";
}

/* --------- common --------- */
html {
  font-family: "Noto Serif JP", serif;
  background: -webkit-linear-gradient(bottom, #d5d7da 0%, #b7d1d2 10%, #adcdce 70%, #d7c8d7 95%, #c8c2c6 100%);
  background: linear-gradient(145deg, #c8c2c6 0%, #a2c8c9 25%, #c8c2c6 50%, #cfb9cf 75%, #c8c2c6 100%);
  color: #042027;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

body {
  background: -webkit-linear-gradient(bottom, #d5d7da 0%, #b7d1d2 10%, #adcdce 70%, #d7c8d7 95%, #c8c2c6 100%);
  background: linear-gradient(145deg, #c8c2c6 0%, #a2c8c9 25%, #c8c2c6 50%, #cfb9cf 75%, #c8c2c6 100%);
  animation: bg-gradient 5s linear infinite alternate;
  width: 100%;
}

@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

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

a {
  transition: all 0.5s;
}

.anim {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.6s ease-out;
}
.anim.on {
  opacity: 1;
  transform: translateY(0);
}

.mainVisual,
main,
footer {
  margin: 0 auto;
  padding: 100px 20%;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.btn a {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 28px;
  max-width: 380px;
  background: #005d61;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
  transition: 0.4s;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.sp {
  display: none;
}

@media screen and (min-width: 961px) {
  .topic .topic_box {
    margin-top: 3em;
  }

  .topic .record_link a {
    padding: 30px;
    font-size: 120%;
  }
}

@media screen and (max-width: 960px) {
  .flex {
    display: block;
  }

  .sp {
    display: block;
  }
}

footer {
  color: #666;
  text-align: right;
}

/* --------- movie --------- */

.movie {
  margin: 80px 0 200px;
}

.movie div {
  position: relative;
  padding-top: 56.25%;
}
.movie div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------- topic --------- */
.fade {
  display: none;
}
.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;
}

.topic {
  display: flex;
  width: 80%;
  position: relative;
  flex-direction: column;
}

.topic .topic_tit {
  text-align: center;
  font-size: 45px;
  font-weight: bold;
}

.topic {
  align-items: center;
  margin-top: 1.5em;
}

.topic .topic_box {
  text-align: center;
  margin-bottom: 3em;
}

.topic .topic_no {
  margin-top: 2em;
  text-align: center;
  font-size: 30px;
}

.topic .topic_box .txt {
  font-size: 33px;
  margin-bottom: 10px;
}

.topic .topic_box .title {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #005d61;
}

.topic .date {
  font-size: 35px;
  text-align: center;
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 1em;
}

.topic .record_link a {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 15px;
  background: #622b65;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.6;
  transition: 0.4s;
  text-decoration: none;
}

/* .topic .scroll {
 position: absolute;
 transform: translate(-50%, 0);
 bottom: 7vh;
 height: 8vh;
 width: 1px;
 overflow: hidden;
 background-color: #005d61;
} */

/* --------- mainVisual --------- */
.mainVisual {
  background: #ffffff40;
}

.mainVisual .flex {
  align-items: center;
}

.mainVisual .mainInner {
  width: 47%;
}

.mainVisual .mainInner p {
  font-size: 25px;
}

.mainVisual .mainInner p .artist {
  font-size: 30px;
}

.mainVisual .mainInner .singleTitle {
  font-size: 1.8em;
  margin: 0.4em 0;
}

.mainVisual .jacket {
  width: 47%;
}

.mainVisual .btn {
  margin-top: 30px;
}

/* --------- main --------- */

main h2 {
  color: #005d61;
  font-size: 50px;
  text-align: center;
  margin-bottom: 40px;
}

#comment {
  margin-top: 100px;
}

#single {
  margin-top: 150px;
}

#single .disc_detail {
  background: #9ab6b785;
  margin-bottom: 100px;
}

#single .disc_detail dt {
  font-size: 120%;
  text-align: center;
  padding: 20px 50px;
  background: #005d61b5;
  color: #fff;
}

#single .disc_detail dd {
  padding: 70px 70px 0;
}

#single .disc_detail dd .dvd {
  padding-top: 2em;
}

#single .disc_detail dd:last-child {
  padding-bottom: 70px;
}

#single .disc_detail .tracList {
  margin: 40px 0 0;
}

#single .dvd_comment {
  background: #ffffff40;
  padding: 40px;
  margin-top: 30px;
}

#member_comment {
  margin-top: 150px;
}

#member_comment .commentWrap {
  border: 4px double #005d61;
  padding: 70px;
  margin-bottom: 200px;
}

#member_comment .tipupCommentTit {
  text-align: center;
  border-bottom: 1px solid #005d61;
  padding: 0 0 20px;
  margin-bottom: 30px;
  font-size: 110%;
}

#member {
}

#member h2 {
  font-size: 30px;
}

#member .memberBenefitImg {
  margin-bottom: 40px;
}

#member .memberWrap .sampleList li {
  width: 48%;
}

#member .memberWrap .sampleTxt {
  text-align: end;
  font-size: 90%;
}

#member .memberWrap {
  background: #ffffff40;
  padding: 70px;
  margin-bottom: 200px;
}

#member .memberWrap .memberHeadingText {
  margin-bottom: 1em;
}

#member .memberWrap .memberBenefit {
}

#member .memberWrap .detail {
  text-align: center;
  border: 1px solid #005d61;
  padding: 30px;
  margin-bottom: 60px;
  margin-top: 60px;
}

#member .memberWrap .detail .title {
  font-weight: bold;
  margin-bottom: 10px;
}

#member .memberWrap .detail .commentArea {
  margin-bottom: 20px;
}

#member .memberWrap .memberBenefit dl {
  font-size: 120%;
  margin-bottom: 30px;
  color: #fff;
  background: #005d61;
  padding: 30px;
  text-align: center;
}

#member .memberWrap .memberBenefit dt {
  font-weight: bold;
  margin-bottom: 10px;
}

#member .memberWrap .memberBenefit dd {
  font-weight: bold;
  font-size: 120%;
}

#member .memberBtnContain .flexWrap {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

#member .memberBtnContain {
  margin: auto;
}

#member .memberBtnContain .btnTeam,
#member .memberBtnContain .btnClass {
  width: 47%;
  border-radius: 10px;
  padding: 5% 0;
  text-align: center;
  text-decoration: none;
}

#member .memberBtnContain .btnTeam {
  background-color: #174cb1;
}

#member .memberBtnContain .btnClass {
  background-color: #3cb7e4;
}

#member .memberBtnContain .btnTeam img,
#member .memberBtnContain .btnClass img {
  width: 42%;
}

#member .memberBtnContain .btnTeam p,
#member .memberBtnContain .btnClass p {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  margin-top: 16px;
  line-height: 1;
}

#member .memberWrap .store_attention {
  border: 1px solid #005d61;
  padding: 30px;
  margin-bottom: 60px;
  margin-top: 60px;
}

#member .memberWrap .store_attention p {
  margin-bottom: 20px;
  text-align: center;
}

#member .memberWrap .store_attention ul {
  margin-bottom: 20px;
}

#member .memberWrap .store_attention .memberHowto {
  margin-bottom: 50px;
}

#member .memberWrap .store_attention .memberNotice {
  margin-bottom: 30px;
  text-align: left;
}

#member .memberWrap .store_attention .btnWrap {
  margin-bottom: 50px;
}

#member .memberWrap .store_attention .btnWrap a {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 28px;
  max-width: 380px;
  background: #005d61;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.4;
  transition: 0.4s;
  text-decoration: none;
}

#member .memberWrap .store_attention .infoBtnWrap {
  margin-bottom: 20px;
  margin-top: 60px;
}

/* --------- アナログ盤 --------- */

#Record {
  color: #250427;
}

#Record main h2 {
  color: #622b65;
  font-size: 40px;
}

#Record .btn a {
  background: #622b65;
}

#Record .mainVisual .mainInner {
  width: 100%;
}

#Record .txt {
  text-align: center;
  margin-bottom: 40px;
}

#Record .singleTitle {
  text-align: center;
}

#Record .mainVisual p {
  text-align: center;
}

#Record .mainVisual .txt {
  margin-top: 30px;
  font-size: 20px;
}

#Record .mainVisual .jacket {
  width: 100%;
  gap: 20px;
}

#Record .mainVisual .jacket .jk {
  width: 33%;
}

#Record #single .flex {
  gap: 20px;
  align-items: center;
}

#Record #single .detail {
  background: #ffffff40;
  padding: 70px;
}

#Record #single .jk_box {
  width: 40%;
}

#Record #single .jk_box .btn + .btn > a {
  background: #845786;
}

#Record #single .jk_box .jk {
  margin-bottom: 30px;
}

#Record #single .singleWrap {
  margin-top: 100px;
}

#Record #single .singleWrap h2 span {
  font-size: 75%;
}

#Record #single .disc_detail {
  background: #c0afc485;
}

#Record #single .txt_box {
  width: 60%;
}

#Record .btn + .btn {
  margin-top: 2em;
}

#Record #single .disc_detail {
  margin-bottom: 0;
}

@media screen and (max-width: 960px) {
  html {
    font-size: 13px;
  }
  .mainVisual,
  main,
  footer {
    padding: 60px 5%;
  }

  .btn a {
    padding: 20px;
    font-size: 14px;
  }

  main h2 {
    font-size: 24px;
  }

  .movie {
    margin: 30px 0 60px;
  }

  .flexbox {
    height: 87vh;
  }

  .topic {
    width: 90%;

    margin-top: -1em;
  }

  .topic .topic_box {
    width: 100%;
    margin-top: 4em;
  }

  .mainVisual .jacket,
  .mainVisual .mainInner,
  #member .memberWrap .sampleList li,
  #Record .mainVisual .jacket .jk,
  #Record #single .jk_box,
  #Record #single .txt_box {
    width: 100%;
  }

  #member .memberBtnContain .btnTeam,
  #member .memberBtnContain .btnClass {
    width: 100%;
  }

  .topic .topic_tit {
    font-size: 18px;
  }

  .topic .date {
    font-size: 18px;
    font-weight: normal;
  }

  .topic .topic_box .txt {
    font-size: 18px;
  }

  .topic .topic_box .title {
    font-size: 28px;
    font-weight: bold;
  }

  .topic .topic_box + .topic_box {
    margin-top: 40px;
  }

  .mainVisual .mainInner {
    margin-top: 50px;
    text-align: center;
  }

  .mainVisual .mainInner p {
    font-size: 18px;
  }

  .mainVisual .mainInner p .artist {
    font-size: 20px;
  }

  .mainVisual .mainInner .singleTitle {
    font-size: 24px;
  }

  #comment {
    margin-top: 50px;
  }

  #single {
    margin-top: 100px;
  }

  #single .disc_detail {
    margin-bottom: 60px;
  }

  #single .disc_detail dt {
    font-size: 110%;
  }

  #single .disc_detail dd {
    padding: 20px 30px 0;
  }

  #single .disc_detail dd:last-child {
    padding-bottom: 30px;
  }

  #single .dvd_comment {
    padding: 25px;
  }

  #member_comment {
    margin-top: 100px;
  }

  #member_comment .commentWrap {
    padding: 25px;
    margin-bottom: 100px;
  }

  #member .memberWrap {
    padding: 25px;
  }

  #member h2 {
    font-size: 18px;
  }

  #member .memberWrap {
    margin-bottom: 120px;
  }

  #member .memberWrap .detail {
    padding: 20px 15px;
    margin-bottom: 40px;
    margin-top: 40px;
  }

  #member .memberWrap .detail .sampleList li + li {
    margin-top: 20px;
  }

  #member .memberWrap .sampleTxt {
    font-size: 70%;
  }

  #member .memberWrap .memberBenefit dl {
    padding: 15px;
  }

  #member .memberWrap .memberBenefit dd {
    font-size: 110%;
  }
  #member .memberBtnContain .flexWrap {
    flex-direction: column;
    margin-top: min(16vw, 60px);
  }

  #member .memberBtnContain .btnTeam {
    margin-bottom: 5vw;
  }
  #member .memberBtnContain .btnTeam p,
  #member .memberBtnContain .btnClass p {
    font-size: min(3.8vw, 16px);
    margin-top: 1em;
  }

  #member .memberWrap .store_attention {
    padding: 15px;
  }

  #member .memberWrap .store_attention .btnWrap a {
    padding: 20px;
    font-size: 14px;
  }

  #member .memberWrap .store_attention .infoBtnWrap {
    margin-top: 40px;
  }

  #Record .mainInner {
    margin-top: 0;
  }

  #Record main h2 {
    font-size: 27px;
  }

  #Record .mainVisual .txt {
    font-size: 14px;
  }

  #Record .mainVisual .jacket .jk {
    margin-bottom: 30px;
  }

  #Record .mainVisual .jacket {
    display: flex;
  }

  #Record #single .disc_detail {
    margin-top: 30px;
  }

  #Record #single .detail {
    padding: 15px;
  }

  footer {
    padding: 0px 5% 60px;
    font-size: 11px;
  }
}