@charset "utf-8";

/* 共通設定 */
body {
  background-image: url("/img/back_sakura.gif");
  background-size: 200px;
  background-color: #FFF;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: 500;
  color: #444;
  line-height: 24px;
  margin: 0;
}

.wrapper{
  box-sizing: border-box;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: #444;
}

a.button {
  background-color: #E44075;
  color: #FFF;
  display: block;
  line-height: 40px;
  width: 200px;
  text-align: center;
  border-radius: 20px;
  margin: 0 auto;
  /* filter: drop-shadow(0px 2px 2px #aaa); */
}

ul {
  list-style: none;
}

main {
  display: block;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.box {
  width: 100%;
  max-width: 1024px;
  position: relative;
  margin: 0 auto;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

/* ハンバーガーメニュー */
.drawer-hamburger {
  top: 10px !important;
  right: 10px !important;
  background-color: #E44075 !important;
  border-radius: 20px;
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent !important;
}

.drawer-close .drawer-hamburger-icon {
  background-color: #FFF !important;
}

.drawer-hamburger-icon:before {
  background-color: #FFF !important;
}

.drawer-hamburger-icon:after {
  background-color: #FFF !important;
}

.drawer-nav {
  padding-top: 80px;
  background-color: #F8D3E3 !important;
}

.drawer-menu .icon {
  display: inline-block;
  font-size: 18px;
  line-height: 20px;
  width: 30px;
  text-align: center;
}

.drawer-menu .es {
  font-family: 'Kodchasan', sans-serif;
  font-size: 16px;
  line-height: 20px;
}

.drawer-menu .jp {
  font-size: 12px;
  line-height: 20px;
  padding-left: 6px;
}

.drawer-open .drawer-nav {
  width: 90%;
}

.drawer-nav-sns {
  border-top: solid 1px #444;
  margin-top: 40px;
  padding-top: 30px;
  padding-right: .75rem;
  padding-left: .75rem;
  text-align: center;
}

.drawer-nav-sns span {
  font-family: 'Kodchasan', sans-serif;
  font-size: 16px;
  line-height: 14px;
  font-weight: bold;
  display: block;
}

.drawer-nav-sns a {
  font-size: 32px;
  line-height: 36px;
  height: 36px;
  width: 36px;
  display: inline-block;
  margin: 15px 5px;
}

.drawer-nav-sns a.nana img {
  height: 24px;
}

.drawer-nav-sns a.linelive img {
  height: 28px;
}

.flower {
  font-family: 'Niconne', cursive;
}

/* トップメイン画像 */
section.home-visual {
  width: 100%;
}

section.home-visual img {
  width: 100%;
}

/* トップページタイトル */
.home-title .flower {
  font-size: 80px;
  width: 100px;
  margin: 0 auto;
  transform: rotate( -15deg );
  color: #F2C04A;
}

.home-title {
  text-align: center;
}

.home-title span {
  display: block;
  font-family: 'Kodchasan', sans-serif;
  font-size: 20px;
}

/* 個別ページヘッダ */
.page-header {
  height: 4px;
  background-color: #E44075;
}

.page-title .flower {
  font-size: 80px;
  width: 100px;
  margin: 0 auto;
  transform: rotate( -15deg );
  color: #F2C04A;
}

.page-title {
  margin-top: 10px;
  text-align: center;
}

.page-title span {
  display: block;
  font-family: 'Kodchasan', sans-serif;
  font-size: 20px;
}

/* 個別ページメイン画像 */
section.page-visual {
  display: block;
  width: 100%;
  margin: 20px 0;
}

section.page-visual img {
  width: 100%;
}

/* コンテンツ枠 */
section.contents {
  display: block;
  margin: 40px 15px;
}

section.contents h2 {
  display: block;
  text-align: center;
  font-family: 'Kodchasan', sans-serif;
  font-size: 20px;
}

/* コンテンツCDイメージ */
section.contents .cd {
  width: 75%;
  margin: 0 auto 20px auto;
}

section.contents img {
  width: 100%;
}

/* コンテンツテキスト */
section.contents div.text-box {
  margin-top: 10px;
  border-top: 2px solid #E44075;
  padding: 30px 10px;
}

section.contents div.text-box span.caption {
  font-size: 14px;
  font-weight: bold;
}

section.contents div.text-box .bar {
  margin: 30px auto;
  border-top: 1px solid #E44075;
}

/* コンテンツバナー */
section.contents ul.banner li:nth-child(n + 2) {
  /* padding-top: 8px; */
}

/* コンテンツリスト */
section.contents ul.list {
  margin-top: 10px;
  border-top: 2px solid #E44075;
}

section.contents ul.list li {
  padding: 15px 10px;
}

section.contents ul.list li:nth-child(n + 2) {
  border-top: 1px solid #E44075;
}

section.contents ul.list li span.date {
  display: block;
  font-size: 14px;
  font-weight: bold;
}

section.contents ul.list li span.body {
  display: block;
}

/* youtube */
.youtube-border {
  padding: 0 10px 10px 10px;
  background-color:#FF9DC8;
}

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

section.contents .discography-box:nth-child(n + 2) {
  margin-top: 40px;
}


/* フッター */
footer {
  width: 100%;
  margin-top: 30px;
  background-color: #E44075;
  padding: 25px 0 0 0;
  bottom: 0;
}

footer .sns-box {
  display: block;
  text-align: center;
}

footer .sns-box a {
  font-size: 32px;
  line-height: 36px;
  height: 36px;
  width: 36px;
  display: inline-block;
  margin: 15px 7px;
  text-align: center;
  color: #FFF;
}

footer .sns-box a.nana img {
  height: 24px;
}

footer .sns-box a.linelive img {
  height: 28px;
}


footer .thankyou {
  width: 161px;
  margin: 20px auto 10px 10px;
}

.flower-back5 {
  position: absolute;
  color: #FFF;
  right: 20px;
  font-size: 50px;
  margin-top: 60px;
  transform: rotate( -12deg );
}

.flower-back6 {
  position: absolute;
  color: #FFF;
  right: 60px;
  font-size: 120px;
  margin-top: 100px;
}

div.copyright {
  background-color: #FFF;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  padding: 5px;
}

/* SP用 */
@media screen and (max-width: 767px) {

  .pc {
    display: none;
  }

}

/* PC用 */
@media screen and (min-width: 768px) {

  .sp {
    display: none;
  }

  section.home-visual {
    max-width: 1024px;
    margin: 20px auto 0 auto;
  }

  section.page-visual {
    max-width: 1024px;
    margin: 0 auto;
  }

  .home-title .flower {
    font-size: 100px;
    line-height: 34px;
    width: 100px;
  }

  .home-title span {
    font-size: 24px;
    line-height: 30px;
  }

  .page-title .flower {
    font-size: 100px;
    line-height: 34px;
    width: 100px;
  }

  .page-title span {
    font-size: 24px;
    line-height: 30px;
  }

  section.contents {
    max-width: 1024px;
    margin: 30px auto;
  }

  section.contents h2 {
    font-size: 24px;
    line-height: 30px;
  }

  div.pcl {
    width: 49%;
    box-sizing:border-box;
    padding: 0 5px 0 0;
    float: left;
  }

  div.pcr {
    width: 49%;
    box-sizing:border-box;
    padding: 0 0 0 5px;
    float: right;
  }

  .pcl .page-visual img {
    width: 100%;
    border-radius: 10px;
    margin-top: 30px;
    margin-right: 20px;
  }

  section.contents .cd {
    width: 50%;
    margin: 0 auto 20px auto;
  }

  .drawer-open .drawer-nav {
    width: 32.5rem;
  }

}