@charset "utf-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body {
  color: #a9a9a9;
  font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo',
    'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

a {
  color: rgb(34, 34, 34);
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

.bg-darkgray {
  background-color: #a9a9a9;
}

.container,
.container-fulid {
  overflow: hidden;
}

.fb-frame-responsive {
  width: auto;
}

.sectionTitle {
  font-size: 1.5rem;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold !important;
}

/* 英字タイトルをWEBフォントに */
header a,
.display-4,
.display-3,
.lead,
.circle-badges {
  font-family: cursive;
}

.main-txt {
  width: 100%;
}

.lead {
  font-size: 2.25rem;
  width: 100%;
  text-align: center;
  margin-top: 40px;
}

.font-jpn {
  font-family: 'HGP行書体', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo','Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.sectionTitle {
  font-size: 1.8rem;
  background: linear-gradient(transparent 60%, #dc5512 90%);
}

.caption {
  font-size: 1.3rem;
}

.font-blue {
  color: blue;
}

.font-yellow {
  color: yellow;
}

.kyokumoku {
  font-size: 1.2rem;
}

.text-white {
  color: #fff!important;
}

/* img */
.p-centor {
  display: block;
}

/* 基本背景色 */
.baseback {
  position: relative;
  padding: 0;
  background-color: #61428f;
}

/* コピーライト */
.baseback-copy {
  position: relative;
  padding-top: 5%;
  background-color: #61428f;
}

.baseback-copy::before {
  position: absolute;
  width: 100%;
  height: 60px;
  top: -60px;
  background: linear-gradient(45deg, #a9a9a9 30px, transparent 0), linear-gradient(315deg, #a9a9a9 30px, transparent 0);
  background-size: 60px 60px;
}

/* 曲紹介のエリア */
.songArea {
  background-color: #e9ffcb;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 100%;
}

.songArea td {
  padding: 15px;
}

/* メンバー募集のエリア */
.memberArea {
  background-color: #e9ffcb;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  /* background-image: url("../img/bosyu_back.png");
  background-position: center;
  background-repeat: no-repeat; */
  width: 100%;
}

/* ------------------------------
Facebookのiframeサイズ
--------------------------------- */
.fb-frame-responsive {
  display: block;
  width: 100%;
  height: 550px;
}

/* ------------------------------
フッター
--------------------------------- */
.stitch {
  padding: 1rem !important;
  margin: 2em 0 !important;
  color: #565656;
  background-color: #61428f;
  box-shadow: 0px 0px 0px 10px #61428f;
  border: dashed 2px #fff;
  border-radius: 8px;
}

.stitch p {
  margin-bottom: .5rem;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

トップページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* トップ画像 */
.top-image {
  background-image: url("../img/top.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  height: 280px;
  border-radius: 0;
  margin: 15px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
メディアクエリ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media screen and (max-width: 991px) {
  .logo-mark {
    left: 5%;
  }

  .main-txt {
    left: 0%;
  }

}

/* END */

/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767px) {

  body {
    font-size: 0.8rem;
  }
  
  /* ロゴマークを小さく設定 */
  .logo-mark {
    height: 140px;
    width: 140px;
  }

  .logo-mark img {
    width: 50%;
  }

  .top-image {
    height: 180px;
  }

  .lead {
    font-size: 1.5rem;
    margin-top: 20px;
  }

  .sectionTitle {
    font-size: 1.2rem;
  }

  .caption {
    font-size: 1rem;
  }

  .circle-badges {
    top: -10px;
    width: 100px;
    height: 100px;
  }

  .section-title {
    font-size: 1rem;
  }

  .kyokumoku {
    font-size: 1rem;
  }
  
  .imgWidth500 {
    width: 100%;
    max-width: 500px;
  }
}

/* END */

/* 極小デバイス（縦向きモバイル, 576px 未満）
	============================================== */
@media screen and (max-width: 575px) {
  .display-3,
  .display-4 {
    font-size: 2rem;
  }

  body {
    font-size: 0.7rem;
  }

  .logo-mark {
    left: 5%;
    top: -10px;
  }

  .logo-mark img {
    top: 25%;
    left: 25%;
  }

  .top-image {
    height: 130px;
  }

  .lead {
    font-size: 0.9rem;
    margin-top: 20px;
  }

  .sectionTitle {
    font-size: 1rem;
  }

  .caption {
    font-size: 0.8rem;
  }

  .stitch img {
    width: 100%;
  }

}

/* 超極小デバイス（縦向きモバイル, 321px 未満）
============================================== */
@media screen and (max-width: 320px) {
  body {
    width: 320px;
    font-size: 0.6rem;
  }

  .display-3,
  .display-4 {
    font-size: 1.5rem;
  }

  .logo-mark {
    left: 5%;
    top: -10px;
  }

  .logo-mark img {
    top: 25%;
    left: 25%;
  }

  .top-image {
    height: 100px;
  }

  .lead {
    font-size: 0.7rem;
    margin-top: 20px;
  }

  .sectionTitle {
    font-size: 0.9rem;
  }

  .caption {
    font-size: 0.7rem;
  }

  .stitch img {
    width: 100%;
  }

  .kyokumoku {
    font-size: 0.8rem;
  }

}
/* END */

/* トップへ戻るボタン */
.scrollButton {
  position: fixed;
  right: 0px;
  bottom: 0;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  z-index: 1;
  border-radius: 0;

  /* デフォルトで非表示にする */
  opacity: 0;
  visibility: hidden;
}

.arrowUp {
  fill:rgb(0, 0, 0);
}

/* このクラスが付与されると表示する */
.scrollActive {
  opacity: 1;
  visibility: visible;
}