/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
* {
  font-family: 'Noto Sans JP', sans-serif, "Font Awesome 5 Free";
}
/*
:root {
  --font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}*/
html {
  scroll-padding-top: 70px; /* 固定ヘッダの高さ分 スマホでヘッダー画像が隠れてしまうので */
}
body {
  font-family: 'Noto Sans JP', sans-serif, "Font Awesome 5 Free";
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p, td {
  font-family: 'Noto Sans JP', sans-serif, "Font Awesome 5 Free";
}
.f18{
	font-size: 18px;
}

.arrow_color{
color: #e83e8c;
line-height: 30px;
}

.color_ast{
  color: #b15b9b;

}


.page_back {
    background-image: url(../img/bg_contents.png);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}

.page_title_area {
  height: 30vh;
  position: relative;

}
.page_title {
  position: absolute;
  top: 50%;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;

}

.back_translate_register{
background-color: rgba(255, 255, 255, 0.9);
}

.border_btm {
     position: relative;
     padding-bottom: 0.5em;
     border-bottom: 4px solid #DDD;
    font-size: 18px;
    font-weight: bold;
}
 
.border_btm::after {
     position: absolute;
     content: " ";
     border-bottom: solid 4px #b15b9b;
     bottom: -4px;
     width:10%;
     display: block;
}

label{
  font-size: 16px;
  line-height: normal;
}
.title_label{
  color: #b15b9b;
  font-weight: bold;
  font-size: 16px;
}




.form-check-input {
    position: absolute;
    margin-top: 0.65rem;
    margin-left: -3rem;
    width: 5%;
}
@media screen and (max-width: 768px){
.form-check-input {
    position: absolute;
    margin-left: -1rem;
    padding-right: 0.5rem;
    width: 5%;
}
}

.btn-submit-all {
  color: #719bad;
  border-color: #719bad;
  margin-bottom: 10px;
}
.btn-submit-all:hover {
  color: #ffffff !important;
  background-color: #719bad;
  border-color: #719bad;
}
.btn-submit-all:active {
  color: #ffffff !important;
  background-color: #719bad;
  border-color: #719bad;
}





/*--------ログイン--------------------------------*/
.register_back {
    font-family: 'Noto Sans JP', sans-serif, "Font Awesome 5 Free";
    margin: 0;
    padding: 55px 0;
    width: 100vw;
    height: 100vh;
    color: #000;
    overflow-x: hidden;
    hight: 100%;
    background-image: url(https://www.tokailive.org/cpac/2020/laravel/public/img/page_title_img_bg_.png);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}
.card {
    border-radius: 0;
    border: none;
}

.card1 {
    width: 50%;
    padding: 40px 30px 10px 30px;
}

.msg-info {
    padding-left: 15px;
    margin-bottom: 30px;
}

input,
textarea {
    background-color: #ccc;
    /*border-radius: 50px !important;*/
    padding: 12px 15px 12px 15px !important;
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 400
}

input:focus,
textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #96b3d7 !important;
    outline-width: 0;
    font-weight: 400
}



button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}

.card {
    border-radius: 0;
    border: none;
    background-color: rgba(255,255,255,0);
}

.card1 {
    width: 50%;
    padding: 40px 30px 10px 30px;
    background-color: rgba(255,255,255,0.7);
}

.card2 {
    width: 50%;
    background-color: rgba(247,231,218,0.7);
}
/*--#logo {
    width: 70px;
    height: 60px
}
--*/

.heading {
    margin-bottom: 60px !important
}

::placeholder {
    color: #000 !important;
    opacity: 1
}

:-ms-input-placeholder {
    color: #000 !important
}

::-ms-input-placeholder {
    color: #000 !important
}

.form-control-label {
    font-size: 14px;
    margin-left: 15px
}

.msg-info {
    padding-left: 15px;
    margin-bottom: 30px
}

.btn-color {
    border-radius: 50px;
    color: #fff;
    background-image: linear-gradient(to right, #00e6d1, #a8add4, #df9dc2);
    padding: 10px;
    cursor: pointer;
    border: none !important;
    margin-top: 40px
}

.btn-color:hover {
    color: #fff;
    background-image: linear-gradient(to right, #df9dc2, #00B4F2, #00e6d1)
}

.btn-white {
    border-radius: 50px;
    color: #D500F9;
    background-color: #fff;
    padding: 8px 40px;
    cursor: pointer;
    border: 2px solid #D500F9 !important
}

.btn-white:hover {
    color: #fff;
    background-image: linear-gradient(to right, #FFD54F, #D500F9)
}

a {
    color: #000
}

a:hover {
    color: #000
}
.btn.btn-danger{
  background-color: #e3342f;
}
.bottom {
    width: 100%;
    margin-top: 50px !important
}

.sm-text {
    font-size: 15px
}

@media screen and (max-width: 992px) {
    .card1 {
        width: 100%;
    }

    .card2 {
        width: 100%
    }

    .right {
        margin-top: 0px !important;
        margin-bottom: 0px !important
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 10px !important
    }

    .card2 {
        padding: 0px
    }

    .right {
        margin-top: 0px !important;
        margin-bottom: 0px !important
    }
}

.pc_area {
    display: block !important;
}

.phone_area {
    display: none !important;
}

@media only screen and (max-width: 992px) {
    .pc_area {
        display: none !important;
    }

    .phone_area {
        display: block !important;
    }
}



.dwntxt {
    font-size: 13px;
    color: #37393a;
    padding-top: 10px
}

.vrydown {
    font-size: 8px;
    text-align: center;
    color: #000;
    padding-top: 70px;
    padding-bottom: 30px
}


/*------infomation--------------------------*/

h5{
    line-height: 2rem;
}
.f22{
  font-size: 22px;
}
.f24{
  font-size: 24px;
}

.card_info {
    background-color: #fff;
    margin: 20px 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.top {
    background-color: #3F51B5;
    color: #fff;
    width: 27px;
    padding-left: 3px;
    font-weight: bold
}

.head {
    color: #3F51B5;
    font-size: 18px;
    margin-left: 4px;
    padding: 10px;

}
.card-header{
    background-color: #de6094;
    color:#fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    padding:10px;
    font-size: 16px;
}



}
.icon1 {
    position: relative;
    top: 21px;
    left: 50px;
    font-size: 22px !important;
    color: #4b80b9
}

.icon2 {
    font-size: 77px !important;
    color: #dee2e6
}

/*------ユーザー情報-------------------------*/

.input_user_info {
    border-radius: 0 !important;
    padding: 0 5px !important; 
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border: 1px solid #F3E5F5 !important;
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 400;
}
.col-form-label {
    padding: 0 18px 5px; 
}

.card_user_info {
    background-color: rgba(255, 255, 255,0.9);
    background-size: cover;
    margin: 20px 10px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.user_info_back{
/* background-color: rgba(255, 255, 255);
*/}
.min_width300{
    min-width: 400px;

}

.btn-danger:hover{
    background-color: #eb5f5b;
    color:#fff;
}


/*-------online画面----------------------------*/

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.bg_online_top{
padding:5%;
z-index:-10;
}
.bg_online_top::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position: center top;
background-image:url(../img/bg_online.png);
background-size:100% auto;
min-height: 300px;
}

@media only screen and (max-width: 768px){
 .bg_online_top{
  padding:0;
  z-index: -10;
}

 .bg_online_top::before {
  background-image:url(../img/bg_online_sp.png);
    z-index: -10;
 } 
}


.card-header_top {
    background-color: #9e3d3f;
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    padding: 10px;
    font-size: 16px;
    line-height: 1.2;
}

.card-header_top2 {
    background-color: #17184b;
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    padding: 10px;
    font-size: 16px;
    line-height: 1.2;
}

.card-header_top3 {
    background-color: #006e54;
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    padding: 10px;
    font-size: 16px;
    line-height: 1.2;
}


/*------live配信画面-------------------------*/



/*.bg_online_live{
padding:5%;
z-index:-10;
}
.bg_online_live::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position: center top;
background-image:url(../img/cpac2020_pc_wave.png);
background-size:100% auto;
min-height: 300px;
}

@media only screen and (max-width: 768px){
 .bg_online_live{
  padding:0;
  z-index: -10;
}

 .bg_online_live::before {
  background-image:url(../img/cpac2020_pc_wave.png);
    z-index: -10;
 } 
}*/

.bg_live {
    background-image: url(../img/cpac2020_pc_wave.png);
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}

/*------live a----------------------*/
.btn-border {
    display: inline-block;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: #fa6c9f;
    background: -webkit-gradient(linear, left top, right top, from(#fa6c9f), color-stop(80%,#f9bb49));
    background: linear-gradient(to right, #fa6c9f 0%, #f9bb49 100%);    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}
.btn-border2 {
    display: inline-block;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: #67a8d5;
    background: -webkit-gradient(linear, left top, right top, from(#67a8d5), color-stop(80%, #97f57e), to(#97f57e));
    background: linear-gradient(to right, #67a8d5 0%, #97f57e 80%, #97f57e 100%);
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}

.btn-border:hover {
    display: inline-block;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: -webkit-linear-gradient(-180deg, #9C85DE,#EF90B6);
    background: linear-gradient(-180deg, #9C85DE,#EF90B6);
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}
.btn-border2:hover {
    display: inline-block;
    text-align: center;
    font-size: 22px;
    color: #fff;
    background: -webkit-linear-gradient(-180deg, rgb(20, 154, 172), rgb(13, 213, 168));
    background: linear-gradient(-180deg, rgb(20, 154, 172), rgb(13, 213, 168));
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}


.btn-border:hover, .btn-border2:hover {
    color: #fff;
    text-decoration: none;
}

@media only screen and (max-width: 768px){
.btn-border{
    font-size: 20px;
    color: #fff;
} 
.btn-border2{
    font-size: 20px;
    color: #fff;
} 


}







/*------live b----------------------*/
.btn-border_b {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backb.png);
    background-size: contain;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}

.btn-border_b:hover {
      background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backb2.png);
    background-size: contain;

  color: #333;
  text-decoration: none;
}
/*------live c----------------------*/
.btn-border_c {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backc.png);
    background-size: contain;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}

.btn-border_c:hover {
      background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backc2.png);
    background-size: contain;

  color: #333;
  text-decoration: none;
}
/*------live d----------------------*/
.btn-border_d {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backd.png);
    background-size: contain;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 0;
    transition: .4s;
    width: 100%;
    border-radius: 3px;
}

.btn-border_d:hover {
      background-image:url(https://www.tokailive.org/cpac/2020/laravel/public/img/btn_backd2.png);
    background-size: contain;

  color: #333;
  text-decoration: none;
}
/*----online側のcss------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 960px){
.sp_margin{
  margin-top: 70px;
}
}

.nav-link_top {
    font-size: 20px;
    font-weight: bold;
}
.nav-tabs .nav-link_top.active {
    color: #5f85b8;
    font-weight: bold;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-size: 20px;
}

a.nav-link_top:focus, .nav-link_top:hover {
    text-decoration: none;
    color: #ff1742;
     font-size: 20px;
     font-weight: bold;
}
.tab-content_online{
  background-color: #fff;
}

.back_translate{
  display: block;
  background:rgba(255,255, 255,0.7);
  padding:5px 15px;
  border-radius: 5px;
  color:#666666;
  line-height: 2;
}
@media only screen and (max-width: 960px){
.back_translate{
  margin-top: 1rem;
}
}

.parent{
  border-bottom: 1px solid #dee2e6;
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}


a.nav-link:focus, .nav-link:hover {
    text-decoration: none;
        color: #ff1742;

}
a.nav-online :hover {
    color: #ff1742;
    text-decoration: none;
}

.nav-online {
    color: #d76bb4;
    text-decoration: none;
    background:rgba(255,255, 255,0.7);
    margin-right: 5px;
}



.btn-outline-online:not(:disabled):not(.disabled).active,
 .btn-outline-online:not(:disabled):not(.disabled):active,
  .show>.btn-outline-online.dropdown-toggle {
    color: #fff;
    background-color: #00d7b4;
    border-color: #00d7b4;
}

.btn-outline-online {
    color: #fff;
    border-color: #54d3e4;
    background-color: #54d3e4;
    margin: 5px 5px 10px 0;
    padding: .1rem .75rem;
}
.btn-outline-online:hover{
    color: #fff;
    background-color: #00d7b4;
    border-color: #00d7b4;
}



.btn-detail:not(:disabled):not(.disabled).active,
 .btn-detail:not(:disabled):not(.disabled):active,
  .show>.btn-detail.dropdown-toggle {
    color: #fff;
    background-color: #ed637c;
    border-color: #ed637c;
}

.btn-detail {
    color: #fff;
    border-color: #eb2f51;
    background-color: #eb2f51;
    margin: 5px 5px 10px 0;
    padding: .1rem .75rem;
}
.btn-detail:hover{
    color: #fff;
    background-color: #ed637c;
    border-color: #ed637c;
}

.room_header{
  background-color: rgba(255,78,93,0.9);
   color:#fff;
   padding: 5px 15px;
   font-size: 20px;
}


@media (min-width: 576px){
.card-deck .card {
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}
}


.maste-box {
  position: relative;
  background-color: #fff;
     background: rgba(0, 255, 208, 0.1);
  padding: 1em;
}

.maste-tape{
  position: absolute;
  top: -0.75em;
    background-color: #eccce838;
    border-left: 4px solid #bd73a7;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
  font-size: 20px;
  font-weight: bold;
}

.time_header{
  background: linear-gradient(-45deg, rgba(246, 255, 0, .5), rgba(255, 0, 161, .5));
  color: #fff;
  padding: 10px;
  border-radius: 2.5px;
}
.time_header_b{
  background: linear-gradient(-45deg, rgba(22, 243, 9, .5), rgba(40, 135, 219, .8));
  color: #fff;
  padding: 10px;
  border-radius: 2.5px;
}

.maste-tape2{
  position: absolute;
  top: -0.75em;
    background-color: #eccce838;
    border-left: 4px solid #58b470;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
  font-size: 20px;
  font-weight: bold;
}
.maste-tape3{
  position: absolute;
  top: -0.75em;
    background-color: #89959e52;
    border-left: 4px solid #006e54;
  padding: 0.25em 2em;
  color: #454545;
  transform: rotate(-3deg);
  font-size: 20px;
  font-weight: bold;
}

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }

}
.btn--black,
a.btn--black {
  color: #fff;
  background-color: #333;
  padding: 0 12px;
    font-size: 14px;
}
.btn--black:hover,
a.btn--black:hover {
  color: #fff;
  background: #778899;
}

/*------LIVE会場---------------------------------*/

.border_dot_white{

    border-top: 5px dotted #fff;
    border-left: 0;
    padding-top: 10px;

}

.border_left10 {
    border-left: 10px solid #9877b3;
    padding-left: 15px;
    color: #9877b3;
}

.font_prl{
  color: #9877b3;
}