@charset "UTF-8";
/*-----------------------------*/
/* ルール(仮)                   */
/*  - cssはclassを使用          */
/*  - cssでidを使用しない        */
/*  - jsのclassには[js-]をつける */
/*-----------------------------*/

/*----------------------------*/
/* 共通部                      */
/*----------------------------*/
html {
  font-size: 100%; /* em 文字相対に起因 */
}

body { /* body部分の共通CSS */
  font-family     : "M PLUS Rounded 1c", serif; /* フォント */
  line-height     : 1.7;                        /* 文字間隔 */
  font-weight     : 400;                        /* 文字太さ */
  font-style      : normal;                     /* 文字スタイル */
  color           : #000;                     /* 文字カラー */
}

a { /* aタグ共通 */
  text-decoration: none; /* text装飾(下線等) */
}

img { /* img共通タグ */
  max-width: 100%; /* 最大幅 */
}


/*----------------------------*/
/* hedder                     */
/*  -最大画面サイズ1100px(要検討) */
/*----------------------------*/
.wrapper { /* 共通部 */
  max-width: 2400px; /* 最大横幅サイズ */
  margin   : 0 auto; /* box内余白 */
  padding  : 0 4%;   /* box外余白 */
}

/*----------------------------*/
/* hedder-home                */
/*----------------------------*/
.page-header { /* headder サイドに要素を配置 */
  display        : flex;          /* flex */
  justify-content: space-between; /* 揃え方向 */
}

.main-nav { /* ナビゲーション(横並び) */
  display        : flex;      /* flex */
  font-size      : 1.25rem;   /* フォントサイズ */
  text-transform : uppercase; /* 大文字指定 */
  margin-top     : 24px;      /* box内側上余白 */
  list-style     : none;      /* list見出し文字([・]など) */
}

.main-nav li { /* ナビゲーション要素 */
  margin-left: 36px; /* box内左余白(要素間幅) */
}

.main-nav a { /* ナビゲーションaタグ(リンク) */
  color: #fff;
}

.main-nav a:hover { /* ナビゲーションaタグ(リンク) */
  color: #0bd;
}

.home { /* home img */
  background-image   : url(img/artistPhoto.png); /* img */
  min-height         : 100vh;      /* 画面縦方向の全体化 */
  background-size    : cover;      /* box内最大化 */
  background-position: center top; /* 配置位置 */
  background-repeat  : no-repeat;  /* 繰り返し表示抑止 */
}

/*----------------------------*/
/* main contents 共通         */
/*----------------------------*/
.grid {
  display              : grid;
  gap                  : 10px 26px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top           : 5px;
  margin-bottom        : 10px;
  justify-content      : center;
}

/*----------------------------*/
/* section title 共通         */
/*----------------------------*/
.section-title {
  margin-top   : 10px;
  margin-left  : 10px;
  font-size    : 1.5rem;
  border-bottom: 2px solid var(--title-color);
}

.about-title    { --title-color: #0bd; }
.schedule-title { --title-color: purple; }
.music-title    { --title-color: blue; }
.live-title     { --title-color: green; }
.sns-title      { --title-color: orange; }

/*----------------------------*/
/* about contents             */
/*----------------------------*/
.about-card {
  position     : relative;
  margin       : 2em 0 0 0;
  padding      : 0.5em 0.5em;
  border       : solid 3px var(--card-color);
  border-radius: 8px;
}

.about-card .box-title {
  position    : absolute;
  display     : inline-block;
  top         : -13px;
  left        : 10px;
  padding     : 0 9px;
  line-height : 1;
  font-size   : 19px;
  background  : #FFF;
  color       : var(--card-color);
  font-weight : bold;
}

.about-card p {
  color  : #555;
  margin : 0;
  padding: 0;
}

.about1 { --card-color: #0bd; }
.about2 { --card-color: #bd0; }
.about3 { --card-color: #b0d; }

.about-contents a {
  color: #888;
}

.about-contents a:hover {
  color: #000;
}

/*----------------------------*/
/* schedule contents          */
/*----------------------------*/
.schedule-name {
  font-weight: bold;
  font-size  : 1.1rem;
}

.no-schedule {
  margin-top: 1em;
  color     : #555;
}

#schedule-container .grid + .grid {
  border-top : 1px solid #ccc;
  padding-top: 1em;
  margin-top : 0.5em;
}

/*----------------------------*/
/* music contents             */
/*----------------------------*/

.music-contents .item iframe {
  width: 100%;         /* 親要素の幅に合わせる */
  height: auto;
  aspect-ratio: 16 / 9; /* 16:9のアスペクト比を維持 */
  border: none;
}

/*----------------------------*/
/* LIVE contents              */
/*----------------------------*/
.live-contents .item iframe {
  width: 100%;         /* 親要素の幅に合わせる */
  height: auto;
  aspect-ratio: 16 / 9; /* 16:9のアスペクト比を維持 */
  border: none;
}

/*----------------------------*/
/* SNS(X) contents            */
/*----------------------------*/
.sns-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.sns-card {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 1.5em 1em;
  border         : 2px solid #333;
  border-radius  : 12px;
  color          : #333;
  text-align     : center;
  min-height     : 130px;
  transition     : background-color 0.25s, color 0.25s, border-color 0.25s;
}

.sns-card:hover {
  background-color: #000;
  border-color    : #000;
  color           : #fff;
}

.sns-x-icon {
  font-size    : 2.2rem;
  margin-bottom: 0.4em;
  line-height  : 1;
}

.sns-role {
  font-size: 0.8rem;
  margin   : 0;
  color    : inherit;
}

.sns-name {
  font-size  : 1rem;
  font-weight: bold;
  margin     : 0.2em 0 0;
  color      : inherit;
}

/*----------------------------*/
/* footer                     */
/*----------------------------*/
footer{
  background-color: #432; /* 背景色 */
  text-align      : center; /* テキスト位置 */
  padding         : 12px 0; /* box外配置 */
}
footer p {
  color    : #fff;   /* 文字色 */
  font-size: 0.875rem; /* 文字サイズ */
}

/*----------------------------*/
/* Media (スマホ対応)           */
/*----------------------------*/
@media (max-width:600px)
{
  .page-title{
    font-size: 1.0rem;
  }

  .page-header{
    flex-direction: column;
    align-items: center;
  }

  .main-nav{
    font-size: 1rem;
    margin-top: 10px;
  }
  .main-nav{
    margin:0 20px;
  }

  .home-content{
    margin-top: 20%;
  }

  .home { /* home img */
    background-image   : url(img/artistPhoto_mobile.png); /* img */
    min-height         : 100vh;      /* 画面縦方向の全体化 */
    background-size    : cover;      /* box内最大化 */
    background-position: center; /* 配置位置 */
    background-repeat  : no-repeat;  /* 繰り返し表示抑止 */
  }
}