/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, form, fieldset {
  margin: 0;
  padding: 0;
}

ul,dl{
  list-style: none;
}


body {
  padding-top: 3rem;

  color: #fff;
  background-image:
    url("../img/common/earth.png"),
    url("../img/common/bg_01.jpg");
  background-repeat:
    no-repeat,
    repeat;
  background-position:
    center 92%,
    center;
/*
  background-attachment: 
    fixed;
  */
  /* グラデーションする場合 */
  /*background: linear-gradient(#05FBFF, #1E00FF); */
}

img{
  width:100%;
  max-width:100%;
}


a img:hover {
	opacity: 0.5 ;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  /* margin-bottom: 4rem; */
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

.jumbotron{
  background-color: none;
}


/*-- PC版表示CSS  --*/
.pc_area{
  display:block;
}
.sp_area{
  display:none;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
  .pc_area{
    display:none;
  }
  .sp_area{
    display:block;
  }
}



/*　ナビゲーションバー
-------------------------------------------------- */

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

.navbar-color .navbar-nav .show > .nav-link,
.navbar-color .navbar-nav .active > .nav-link,
.navbar-color .navbar-nav .nav-link.show,
.navbar-color .navbar-nav .nav-link.active {
  color: #FCC920;
}

.navbar-color .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.7);
}

.navbar-nav a{
  color:#231815;
}

.foreign-language{
  font-size:1rem;
  font-weight:100;
  }


/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
    .navbar-nav li{
        border-bottom:1px solid #2A8388;
        background-color: rgba(0, 0, 0,0.8);
        padding:0.5rem 1rem;
        width:100%;
    }
    .nav-link span{
        float: right;
    }
    .navbar{
    padding:0px;
    }
    .navbar-brand{
      padding:0.5rem 1rem;
    }
    .navbar-toggler{
      margin:0.5rem 1rem;
    }
    
    .navbar-nav a{
      color:#ffffff;
    }
}

.navbar-color .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/*　TOPへ戻るボタン
-------------------------------------------------- */
#topBtn{
    background: #2A8388;
    color: #fff;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.8 ;
    font-weight: bold;
}

#topBtn:hover{
    background: #FBCC1B;
}



/*　タイトル　情報
-------------------------------------------------- */
#MAIN{
margin-top:2rem;
}

.top-img{
  margin-top: 1rem;
  margin-bottom:-2rem;
}

h1{
  color: #6CCFCE;
  font-weight: 900;
  height:100%;
  padding-bottom:1rem;
  font-size:1.8rem;
}

h1 span{
  color: #FBCC1B;
  font-size: 1.4em;
}

.h1_lead{
  font-size:1.2rem;
  line-height:1.6rem;
}

.tenponame{
  background-image:url("../img/common/tenponame_background.png");
  height:100%;
  background-repeat:no-repeat;
  background-position:right bottom;
  margin-bottom:2rem;
}

@media screen and (max-width: 768px){
.tenponame{
  background-position:left bottom;
  }
}

h2{
  color: #6CCFCE;
  font-weight: 900;
  height:100%;
  padding-bottom:1rem;
}

h2 span{
  color: #FBCC1B;
  font-size: 1.2em;
}

.contentstitle{
    width:100%;
    background-image: url("../img/common/title_backimg.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    margin-bottom:2rem;
}

.subtilte{
    width:100%;
    background-image: url("../img/common/subtitle_backimg.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    margin-bottom:2rem;
}


.contents_block{
    margin:0px;
    padding:0px;
    background-color:rgba(0,0,0,0.8);
    border:1px solid #2A8388;
}

.f-yellow{
  color:#FBCC1B;
}

.f-aqua{
  color:#6CCFCE;
}

.f-bold{
  font-weight:bold;
}

hr{
  border-top: 3px dashed #6CCFCE;
}


/*　パンくず
-------------------------------------------------- */

.breadcrumb{

  padding: 2rem 1rem;
  margin:0;
  padding: 0 0 2rem 0;
  
  list-style: none;
  background-color:transparent;

}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #fff;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #ffffff;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* フッター 
-------------------------------------------------- */

footer{
  background-color:#ffffff;
  padding-bottom:3rem;
}

footer h5{
  color:#212121;
  font-weight:900;
}

.footer_link{
  display: flex;
  flex-wrap: wrap;
}

.footer_link div{
  padding:10px;
}

.footer_link a{
  color:#212121;
}

.footer_link img{
  max-width:200px;
}


/* アニメーション　ボタン 
-------------------------------------------------- */

.linkBtn {
  max-width:300px;
  height:60px;
  overflow: hidden;
  border: 6px double #2A8388;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.25rem;
}

.linkBtn a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 45px;
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  
  background-color: #2A8388;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.linkBtn a span{
  font-weight: 550;
}

.linkBtn a:before {
  content: '';
  position: absolute;

  top: 0;
  width: 120%;
  height: 100%;
  z-index: -1;
  background-color: rgba(0,0,0,0.5);
  transition: all 300ms linear;
  transform: skewX(-30deg) scale(0, 1);
}
.linkBtn a:hover {
  color: #FBCC1B;
}
.linkBtn a:hover:before {
  left: -10%;
  transform: skewX(-30deg) scale(1, 1);
}


/*　詳細ボタン　
-------------------------------------------------- */

.btn_detail{
    color: #1C2B2A;
    font-weight:900;
    background-color: #6CCECD;
    border-color: #6CCECD;
    padding:6px 10px;
    border-radius:5px;
}

.btn_detail:hover{
    color: #1C2B2A;
    background-color: #FCCC1E;
    border-color: #FCCC1E;
    text-decoration: none;
}



/*　TOPページ　
----------------------------------------------------------------- */

/*　スライドショー
-------------------------------------------------- */

.swiper-container{
  top:0px;
  max-width: 1140px;
  position:relative;
}

.swiper-wrapper{
     margin-left;100px;
     position:absolute;
}

    .swiper-button-prev{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_left.png) !important;
    }
    .swiper-button-next{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_right.png) !important;
    }
    
.swiper-background{
    position:absolute;
    background-image: url("../img/top/top_backimg.png");
    width:100%;
    height:0;
    padding-top:48.245%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.swiper-background_sp{
    position:absolute;
    background-image: url("../img/top/top_backimg_sp.png");
    width:100%;
    height:0;
    padding-top:69.53125%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/*　コロナ対応
-------------------------------------------------- */

.corona_taiou{
 border: solid #ED004E 3px;
 padding:5px;
 margin-right: 0px;
 margin-left: 0px;
}

.corona_taiou .col-sm-9{
    padding:1rem;
    background-color:#ED004E;
    font-size:1.5rem;
    font-weight:900;
    text-align:center;
}

.corona_taiou .col-sm-3{
    padding:1rem;
    background-color:#ffffff;
    font-size:1.5rem;
    font-weight:900;
    color:#2A8388;
    text-align:center;
}


/*　営業状況告知
-------------------------------------------------- */

.eigyo_info{
    font-size:1.2rem;
    font-weight:900;
    padding:5px;
    border: solid #007BFF 3px;
}

.eigyo_info h2{
    background-color:#007BFF;
    color:#FFFFFF;
    text-align:center;
    padding:0.5rem;
}

.eigyo_info dl{
    background-color:#FFFFFF;
    color:#212121;
    width:80%;
    margin:0 auto;

}

.eigyo_info dt{
   font-size:1.5rem;
   font-weight:900;
   color:#1636BF;
   float: left;
   }

.eigyo_info dd{
    padding-bottom:1rem;
    line-height:2rem;
    margin-left:200px;
    }


.eigyo_info dd span{
    font-size:1rem;
    color:#212121;
    padding:0.5rem;
    margin-right:0.5rem;
    border: solid #212121 1px;
    border-radius:10px;
}

.eigyo_info p{
font-size:2rem;
text-align:center;
padding-top:1rem;
color:#1636BF;
}

.eigyo_info div{
    background-color:#FFFFFF;
    color:#212121;
    text-align:left;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
	.eigyo_info dt{
		float: none;
	}
	.eigyo_info dd{
    margin-left:10px;
    }
}



.eigyo_info div th{
color:#1636BF;
padding-left:2em;
padding-bottom:1rem;
vertical-align:top;
width:30%;

}

.eigyo_info div td{
border-bottom:solid 1px #212121
vertical-align:top;
padding-bottom:1rem;
}
/*　ゼロ密カラオケ
-------------------------------------------------- */

.zeromitsu{
margin-right:0px;
margin-left:0px;
    background-color:rgba(0,0,0,0.8);
}

.zeromitsu iframe{
    padding-top:30px;
    width:100%;
    height:300px;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
  .zeromitsu iframe{
    padding-top:0px;
  }
}

.zeromitsu dt{
font-size:1.8rem;
}

.zeromitsu dd{
font-size:1.3rem;
}

.zeromitsu dt{
    color:#FBCC1B;
    }

.zeromitsu dt span{
    font-size:2.3rem;
    color:white;
}

.zeromitsu .linkBtn{
    margin-top:1.5rem;
    margin-bottom:1.5rem;
}


/*　ワンカラのポイント
-------------------------------------------------- */

.wankara_point{
}

.wankara_point img{
max-width:500px;
}

.wankara_point .col-md-4{
margin-bottom:1.5rem;
}

.guide_obj{
  max-width: 960px;
  margin: 0 auto;
}

.video_body{
  width:100%;
  }

.info_body .col-md-4{
  margin-bottom:1.5rem;
}

.info_body img{
  max-width:500px;
}


/*　店舗詳細
----------------------------------------------------------------- */

/* 店舗詳細　店舗情報 
-------------------------------------------------- */

.tenpoinfo .col-md-6{
    padding-top:1rem;
    padding-bottom:1rem;
    }
    
.tenpoinfo_body{
    font-size:1.2rem;
    padding:2rem;
}

.tenpoinfo_body a{
  color:#ffffff;
  font-weight:bold;
}


.tenpoinfo_body dt{
    border-bottom:1px dotted #2A8388;
    padding-bottom:1rem;
    padding-top:1rem;
    color:#6CCECD;
}

.tenpoinfo_body dd{
    border-bottom:1px dotted #2A8388;
    padding-bottom:1rem;
    padding-top:1rem;
    }

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 768px){
	.tenpoinfo_body dt{
	    border-bottom:none;
	    padding-bottom:0;
	    padding-top:1rem;
	}

	.tenpoinfo_body dd{
	   padding-top:0;
	}
}

.tenpo_photo{
    padding:1rem;
}
    
.tenpo_photo img{
padding:3px;
border:3px solid #2A8388;
margin-bottom:1rem;
}

.tenpo_photo a img:hover {
	opacity: 0.5 ;
}


/* 店舗詳細　キャンペーン 
-------------------------------------------------- */

.tenpo_campaign_body{
border:1px solid #2A8388;
height:100%;
background-image:url("../img/common/campaign_background.png");
padding:0.5rem;
}

.tenpo_campaign_body dl{
background-color:rgba(0,0,0,0.6);
height:100%;
padding:1rem;
}

.tenpo_campaign_body dt{
color:#FCCC1E;
font-size:1.5rem;
}

.tenpo_campaign_body dd{
margin-top:1rem;
}


/*　店舗詳細　料金
-------------------------------------------------- */

.charge_block .col-md-4{
margin-bottom:2rem;

}

.charge-body{
 margin:1rem;
 }

.charge-body dd{
  font-size:2.0rem;
  color:#6CCFCE;
  font-weight:900;
  margin-bottom:1rem;
  border-bottom:1px dotted #6CCFCE;
}

/**background-color:rgba(0, 0, 0, 0.7);
border:1px solid rgba(255, 255, 255, 0.125);**/

.charge{
  border:3px solid rgba(42,131,136, 0.6);
  /**border-radius: 10px;**/
  background-color:rgba(0, 0, 0, 0.7);
  height:100%;
}

.charge-header{
  background-color: rgba(42,131,136,0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.125);
  /**border-top-left-radius: 10px;**/
  /**border-top-right-radius: 10px;**/

}

.charge-header h3{
padding-top:0.5rem;
padding-bottom:0.5rem;
font-weight:900;
}

.charge-alert{
font-size:0.9rem;
}

.charge-body h4{
background-color: rgba(255,255,255, 0.2);
padding:5px 10px;
margin-bottom:10px;
}

/*　ワンカラとは
----------------------------------------------------------------- */

/*　PIT
-------------------------------------------------- */
.about_pit{
padding:2rem 1rem;
}

.about_pit h3{
font-size:1.6rem;
font-weight:bold;
color:#6CCFCE;
padding-bottom:1.5rem;
}

/*　COCKPIT
-------------------------------------------------- */
.about_cockpit{
padding:2rem 1rem;
}

.cockpit_tilte{
  color: #6CCFCE;
  font-weight: 900;
  height:100%;
  padding-bottom:1rem;
}

.title_headphone{
    width:100%;
    background-image: url("../img/whats1kara/title_headphone.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-bottom:1rem;
}

.title_mike{
    width:100%;
    background-image: url("../img/whats1kara/title_mike.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-bottom:1rem;
}

.title_mixer{
    width:100%;
    background-image: url("../img/whats1kara/title_mixer.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-bottom:1rem;
}


.cockpit_tilte{
   font-size:1.8em;
   padding-left:90px;
   padding-top:15px;
}

.about_cockpit .f-bold{
  font-size:1.6rem;
}

.about_cockpit .col-md-6{
margin-bottom:1.5rem;
padding-bottom:1.5rem;
}

/*　ZONE
-------------------------------------------------- */
.about_zone{
padding:2rem 1rem;
}

.about_zone h3{
font-size:1.6rem;
font-weight:bold;
color:#6CCFCE;
padding-bottom:1.5rem;
}

.about_zone .f-bold{
  font-size:2.0rem;
}

/*　ワンカラ利用方法
----------------------------------------------------------------- */

.wankara_guide{
padding:2rem 1rem;
}

.wankara_guide h3{
font-size:1.8rem;
font-weight:bold;
color:#6CCFCE;
padding-bottom:0.5rem;
}

.guide_arrow{
  padding-top:0.5rem;
  padding-bottom:1.5rem;
}

.wankara_guide .col-md-6 img{
  margin-bottom:1rem;
  }


/*　キャンペーン
----------------------------------------------------------------- */

.wankara_campaign{
padding:2rem 1rem;
}

.wankara_campaign h3{
font-size:1.8rem;
font-weight:bold;
color:#6CCFCE;
padding-bottom:0.5rem;
}

.campaign_body{
  margin-top:-5rem;
}

.boderline{
  padding-top:1rem;
  width:100%;
  height:1px;
  margin-bottom:1rem;
  border-bottom:1px dotted #6CCFCE;
  }


/*　よくある質問
----------------------------------------------------------------- */
.wankara_faq{
padding:2rem 1rem;
}

.wankara_faq_block{
  margin-bottom:3rem;
}

.wankara_faq h3{
font-size:1.8rem;
font-weight:bold;
color:#6CCFCE;
padding-bottom:0.5rem;
}

.wankara_faq ul{
  margin-left:1rem;
  margin-bottom:1rem;
  }
  
.wankara_faq li{
  text-indent:-1.6rem;
  padding-left:1.6rem;

  }

.wankara_faq .f-bold{
  font-size:1.5rem;
}

/*　店舗一覧
----------------------------------------------------------------- */

.ship_list_info{
  padding:2rem;
}

.ship_address{
  margin-bottom:1rem;
}


.ship_address dt{
  float:left;
  color:#6CCFCE;
  height:100%;
}

.ship_address dd{
  padding-left:6rem;
  border-bottom:1px dotted #6CCFCE;
  margin-bottom:1rem;
  padding-bottom:1rem;
}

.ship_list_body h2{
  color:#FBCC1B;
}

.ship_list_body .col-md-4{
  height:100%;
  margin-bottom:2rem;
}

.ship_list_link{
  margin:0px;
}

.ship_list_link .col-4{
margin-bottom:10px;
}


.btn_ship_link{
  height:100%;
  border:1px solid #6CCFCE;
  background-color: rgba(42,131,136,0.3);
  padding:5px;
}

.btn_ship_link a{
  font-weight:bold;
  display:block;
  color:#ffffff;
  text-decoration:none;
  }
  
.btn_ship_link:hover{
  background-color: rgba(251,204,27,0.3);
  border:1px solid #FBCC1B;
  }

.btn_ship_link span{
  color:#FBCC1B;
}


/*　外国語
----------------------------------------------------------------- */
.lang_top_menu{
  margin-bottom:2rem;
}

.lang_top_menu img{
  max-width:330px;
  margin-bottom:1rem;
}

.lang_top_menu a img:hover{
  opacity: 0.5 ;
}


.contact_body{
  max-width:810px;
  margin:0 auto;
}

.input_body{
padding:2rem 1rem;
background-color: rgba(0,0,0,0.8);
}

.input_body li{
padding-top:1.5rem;
margin-bottom:1rem;
border-top:1px solid #6CCECD;
}

.input_body .label{
line-height:0;
}

.input_body .value span{
padding-left:1rem;
}

.input_body .value input{
margin-left:1rem;
padding-left:0.5rem;
}

.input_body .value textarea{
margin-left:1rem;
padding-left:0.5rem;
width:100%;
max-width:500px;
height:250px;
}

.input_body h3{
color:#6CCECD;
margin-bottom:2rem;
}

.input_body label{
font-weight:bold;
color:#FBCC1B
}

.input_body .notice{
font-size:0.8rem;
}

.form_btn{
margin-top:1rem;
display: flex;
flex-wrap: wrap;
}

.form_btn li{
margin-right:1rem;
margin-bottom:1rem;
}