@charset "UTF-8";
/*- jp-no1
-----------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .jp-cmp-h1-001{
    font-size: 130%;
    padding: 10px 0.5em;
  }
}

#jp-no1 {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background: #e73f35; 
  width: 1030px;
  padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
  #jp-no1 {
    padding: 10px 1%;
    width: auto;
  }
}


/*- SNSボタンエリア
-----------------------------------------------------------------------*/
.jp-cmp-list-social-001 ul{
  margin: 10px auto;
  width: 200px;
}
@media screen and (max-width: 767px){
  .jp-cmp-list-social-001 ul{
    width: 18em;
  }
  .jp-cmp-list-social-001 li{
    border-right: 4px solid transparent;
    border-bottom: 0;
  }
}


/*- コンテンツエリア
-----------------------------------------------------------------------*/

.jp-no1-contents{
  margin: 40px 15px;
  border-bottom: 1px solid #D5D5D5;
  padding:20px;
  background: #fff;
  border-radius: 50px;
}


@media screen and (max-width: 767px) {
 .jp-no1-contents{ 
  padding: 10px;
  }
}


/*- メインビジュアル・リードエリア
-----------------------------------------------------------------------*/
.jp-no1-main{
  margin: 0 0 10px;
  padding: 10px;
}

.jp-no1-img{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0px 0 0;
  width: 100%;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .jp-no1-img{
    padding: 0;
    width: 100%;
    pointer-events: none;
  }
}


/* リード文 */
.jp-no1-txt{
  text-align: center;
  padding: 0 20px;
}

.jp-no1-mainlead{
  font-size:34px;
  font-weight: bold;
  color: #D70E18;
  padding-bottom: 10px;
}

.jp-no1-leadtxt{
  font-size:18px;
  font-weight: normal;
}

/*注意書きリスト*/
.jp-no1-attention-wrap{
  padding: 10px;
  margin: 10px auto 0;
}

.jp-no1-attention-txt{
  font-size: 13px;
  margin: 0 0 0 1em;
  text-indent: -1em;
  text-align: left;
}
.jp-no1-attention-txt li{ margin: 0 0 0.2em; }
.jp-no1-attention-txt li:last-child{ margin: 0; }


@media screen and (max-width: 767px) {
  .jp-no1-txt{
    padding: 0 10px;
  }

  .jp-no1-mainlead{
    font-size:24px;
    padding-top:20px;
  }
    .jp-no1-leadtxt{
    font-size:14px;
    font-weight: normal;
  }

  .jp-no1-attention-txt{
    font-size: 12px;
    margin: 5px 0 0 1em;
  }
}


/*- 音声CM紹介エリア
-----------------------------------------------------------------------*/


.jp-no1-cm{
  background-color: #fdd100;
  margin: 90px 15px 40px;
  padding: 0 20px 30px;
  border-radius: 50px;
  border:4px solid #23286a;
}


/* タイトル */
.jp-no1-title{
  position: relative;
  margin:0 auto;
  text-align: center;
  top:-34px;
  z-index:10;
}



/* 紹介枠 */
.jp-no1-cm-box{
  display: flex;
  justify-content: center;
}

.jp-no1-cm-box-txt{
  width: 40%;
  margin: 20px;
  display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: stretch;
      align-items: center;
}

.jp-no1-cm-box-txt .lead{
  display: block;
  font-size:28px;
  font-weight: bold;
  color:#23286a;
}


.jp-no1-cm-box-txt a{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding: 1.2em 3.2em 1.2em 2em;
  border: none;
  background-color: #23286a;
  background-image: url(../img/movie_btn.png);
  background-position: right 3em center;
  background-size: 2em;
  background-repeat: no-repeat;
  color: #fdd100;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 5px 5px 0 #0c6fb3;
  border-radius: 50px;
  transition: 0.3s ease-in-out;
}

.jp-no1-cm-box-txt a:hover {
  background-color: #D70E18;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
  opacity: 1;
  color: #fff;
}


/* プロフィール枠 */
.jp-no1-cm-box-img{
  width: 60%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding: 20px 5px;
  border-radius: 50px;
}

.jp-no1-cm-photo {
  width: 40%;
  text-align: center;
}

.jp-no1-cm-photo img{
  width: 200px;
  border-radius: 20px;
}

.jp-no1-cm-profile{
  width: 54%;
  padding-left: 10px;
}

.jp-no1-cm-profile p{
  font-size:14px;
  color: #473c2d;
}

.jp-no1-cm-profile .voice{
  margin-bottom:10px;
  font-size:18px;
  font-weight: bold;
}


.jp-no1-cm-profile span{
  font-weight: bold;
}


@media screen and (max-width: 767px) {
  .jp-no1-cm{
  padding: 0 15px 20px;
  }

  .jp-no1-cm-box{
    display: block;
    text-align: center;
  }
  
  .jp-no1-cm-box-txt{
    display: block;
    width: auto;
    margin:0 0 50px;
  }
  
  .jp-no1-cm-box-txt .lead{
    font-size:26px;
  }
  

  .jp-no1-cm-box-txt a{
    width: auto;
    margin-top:20px;
    padding: 1.2em .9em;
    background-position: right 1.3em center;
  }

  .jp-no1-cm-box-img{
    display: block;
    width: auto;
    padding: 20px 5px;
  }
  .jp-no1-cm-photo {
    width: auto;
  }
  .jp-no1-cm-profile{
    width: auto;
    font-size:14px;
    padding: 10px;
    text-align: left;
  }

  .jp-no1-cm-profile .voice{
    text-align: center;
  }

  .jp-no1-cm-profile p{
    font-size:13px;
  }
  

}





/*- 検索コンテンツエリア
-----------------------------------------------------------------------*/

#jp-no1-serach h2{
  font-weight: bold;
  text-align: center;
  font-size:30px;
  padding: 30px 0;
}

.jp-no1-serach-txt{
  font-size:16px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #jp-no1-serach h2{
    font-size:24px;
  }

  .jp-no1-serach-txt{
    text-align: left;
  }
  

}



/* 検索フォーム */

.jp-no1-form{
  margin:20px 0;
}

.jp-no1-formbox{
  display: flex;
  justify-content: center;
    }

.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  border: 3px solid #D70E18;
  border-radius: 50px;
  width: 550px;
  height: 60px;
}

.search-form input {
  width: 500px;
  height: 45px;
  padding: 5px 15px;
  border: none;
  box-sizing: border-box;
  font-size: 1.5em;
  outline: none;
}

.search-form input::placeholder{
  color: #777777;
}

.search-form button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 60px;
  border: none;
  background-color: #D70E18;
  cursor: pointer;
  background-image: url("/web/src/s/kyokusuuno1/img/icon_search.png");
  background-repeat: no-repeat;
  background-position: right 1.3em center;
  background-size: 2em;

}

/* .search-form button::after {
  width: 24px;
  height: 24px;
} */



@media screen and (max-width: 767px) {

  .search-form {
    width: auto;
  }

  .search-form input {
    width: auto;
    height: 55px;
    padding:5px 5px 5px 15px;
  }
  

  .search-form button {
    width: 40px;
    height: 60px;
    background-position: center;
  }
  

}


/* ソングボタン */
#jp-no1-serach .jp-no1-songbtn,#jp-no1-serach .jp-no1-songbtn-w{
  margin:40px 0;
}

.jp-no1-songbtn p,.jp-no1-songbtn-w p{
  font-size:18px;
  font-weight: bold;
  padding-left: 20px;
}


/* ソングボタン*/

#jp-no1-serach .jp-no1-songbtn ul,#jp-no1-serach .jp-no1-songbtn-w ul{
  display: flex;
  justify-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

#jp-no1-serach .jp-no1-songbtn li,#jp-no1-serach .jp-no1-songbtn-w li{
  margin: 10px;
  width: 30%;
  text-align: center;
  }

#jp-no1-serach .jp-no1-songbtn li a,#jp-no1-serach .jp-no1-songbtn-w li a{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  padding: 16px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #23286a;
  border-radius: 40px;
  box-shadow: 5px 5px 0 #D70E18;
  border: solid 2px #D70E18;
  transition: 0.3s ease-in-out;
}


#jp-no1-serach .jp-no1-songbtn li a:hover,#jp-no1-serach .jp-no1-songbtn-w li a:hover {
  background-color: #23286a;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
  opacity: 1;
  color: #fff;
}

/* ソングボタン色 */

#jp-no1-serach .song a{
  background-color: #b0e0e6;
}

#jp-no1-serach .artist a{
  background-color: #b0e0e6;
}

#jp-no1-serach .title a{
  background-color: #b0e0e6;
}

#jp-no1-serach .kashi a{
  background-color: #b0e0e6;
}

#jp-no1-serach .genre a{
  background-color: #c3deb0;
}

#jp-no1-serach .rank a{
  background-color: #f5deb3;
}



@media screen and (max-width: 767px) {

  .jp-no1-songbtn p,.jp-no1-songbtn-w p{
    font-size:16px;
    padding-left: 0;
    text-align: center;
  }

    /* スマホ２列 */
  #jp-no1-serach .jp-no1-songbtn li{
    margin: 8px;
    width: 43%;
    }
  
    /* スマホ１列 */
  #jp-no1-serach .jp-no1-songbtn-w li{
      margin: 10px;
      width: 100%;
      }


  }


/* ボタン */

.jp-no1-btn {
  margin:20px 0;
}

.jp-no1-btn a{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding: 1.2em 3.2em 1.2em 2em;
  border: solid 2px #D70E18;
  background-color: #fdd100;
  background-image: url("/web/src/s/kyokusuuno1/img//arrow.png");
  background-position: right 1.2em center;
  background-size: 1em;
  background-repeat: no-repeat;
  color: #23286a;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 5px 5px 0 #D70E18;
  border-radius: 20px;
  transition: 0.3s ease-in-out;
}

.jp-no1-btn a:hover {
  background-color: #23286a;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
  opacity: 1;
  color: #fff;
}

@media screen and (max-width: 767px) {

  .jp-no1-btn a{
    width: auto;
  }
  
}



/*- 改行
-----------------------------------------------------------------------*/
.br-pc{
  display: block;
}
 .br-sp{
 display: none;
}

@media screen and (max-width: 767px) {
 .br-pc{
  display: none;
 }
 .br-sp{
 display: block;
}
}