@charset "utf-8";

/*アイコン＋テキスト
---------------------------------------------------------------------------*/
.dsp2_6,.dsp2_7,.dsp2_8{
	background-color:#dbbec1;
	padding:10px 0 0 10px;
	margin-top:20px;
}
.dsp2_6:before,.dsp2_7:before,.dsp2_8:before {
		vertical-align: middle;
  padding-right: 5px;
}
.dsp2_6:before {
    content: url(../../special/dsp_img/img2_6.png);
}
.dsp2_7:before {
    content: url(../../special/dsp_img/img2_7.png);
}
.dsp2_8:before {
    content: url(../../special/dsp_img/img2_8.png);
}

/*画像幅100%解除
---------------------------------------------------------------------------*/
.im-org img{width:auto;}

/*ブロック上部区切り線＆上部余白
---------------------------------------------------------------------------*/
.top_bd{border-top:1px #ccc solid;padding:10px 0 20px 0; }

/*li リスト形式表示（soundup_bmw)
---------------------------------------------------------------------------*/
.list_sq ul{list-style-type: square;padding-left:25px;}
.list_sq ul li{padding-left:0px;}


/*連続<li>下余白　（magazine)
---------------------------------------------------------------------------*/
ul.pab30 li{padding-bottom:30px}

/*カテゴリメニュー（news)
---------------------------------------------------------------------------*/
#news{text-align:center;margin-top:50px;}
#news ul{width:100%}
#news li{width:18%;padding:1%;}
#news li .off{background-color:#ddd;border-radius: 5px;padding:5px 0;}
#news li .on{background-color:#b32034;color:#fff;border-radius: 5px;padding:5px 0;}

/*（event)
---------------------------------------------------------------------------*/
dl.event_list:first-child {border-top:1px solid #4d4d4d;}
dl.event_list{padding:20px 0;border-bottom:1px solid #4d4d4d;width:100%;margin:auto;display: flex;  flex-wrap: wrap;}
dl.event_list_on{background-color:#efeadf;}
dl.event_list dd{margin:0;}
dd.event_date{width:12%;}
dd.event_name{width:27%;padding-right:1%;}
dd.event_sanka{width:10%;}
.event_sanka_ok{background-color:#b32034;color:#fff;border-radius: 5px;font-size:9px;text-align:center;margin:0 10%;}
dd.event_area{width:17%;}
dd.event_venue{width:23%;}
dd.event_link{width:10%;}
.event_link_ok{border:1px solid #ccc;text-align:center;font-size:10px;padding-top:2px;background-color:#fff;margin-right:15px;}
dd.event_houkoku{padding:10px 0 0 12%;}
dd.event_houkoku img{width:30%;padding:1% 3% 1% 0;margin:0;}
dd.event_houkoku p{margin-top:10px;}

/*（inst_)
---------------------------------------------------------------------------*/
.tan,.set,.tsuika {  margin-right: 8px;  margin-left: 1px;  color: white;  border-radius: 6px;  box-shadow: 0 0 3px #ddd;  white-space: nowrap;font-size:90%;}

.tan {  background-color: green;padding: 2px 6px;}
.set {  background-color: orange;padding: 2px 8px;}
.tsuika {  background-color: brown;padding: 2px 6px;}

.button01{outline: none;border: none;  background: transparent;}
.button01 a {  display: flex;  justify-content: space-between;  align-items: center;
  margin: 0 auto;  padding: 1em 1.4em;  width: 80%;  color: #333;  font-weight: 700;
  background-color: #cccccc;  transition: 0.3s;font-family: "メイリオ" ;font-size:16px;}

.button01 a::after {  content: '';  width: 5px;  height: 5px;  border-top: 3px solid #333333;  border-right: 3px solid #333333;  transform: rotate(45deg);}

.button01 a:hover {  text-decoration: none;  background-color: #bbbbbb;}

	
.button {  display: grid;  grid-auto-columns: 1fr;  grid-auto-flow: column;  width: fit-content;  gap: 1rem;}

.lh3 li{padding:3px 0;}

.meisai table{min-width:100%;}
.meisai td{text-align:right;}
.meisai th.num{text-align:center;}

/*（トップページ)
---------------------------------------------------------------------------*/

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background:#333;
	text-align:center;
	color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}

/*IE11対策用バーの線の高さ*/
#splash_text svg{
    height: 2px;
}
/*========= LoadingのためのCSS ここまで ===============*/


.ind-bg{
		background-color:#000;
		color:#eee;
}
.ind-bg a{
		color:#fff;
		text-decoration:underline;
}
#header-area-index{
		box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.5);
		padding-bottom:10px;
		background-color:#fff;
}

#ing-list{
	padding-top:50px;
	margin-bottom:100px;
}
@media screen and (max-width: 480px) {
			#ing-list button{
				margin-top:20px;
				padding:8px;
			}
}
.ing-list__txt{
		text-align:center;
}

.top-ing-area{
		display:flex;
		justify-content: space-around;
    flex-wrap: wrap;

}
.top-ing-box{
		position: relative;
		width:24%;
		margin-right:1%;
}

.top-ing-box__img img{
		width:100%;
}
.top-ing-box__date{
		position: relative;
		top: 20px; 
		background-color:#000;
		color:#fff;
		width:82px;
		padding:0 5px;
}
.ing-list__txt button{
		background-color: #b32034;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 4px 2px;
    cursor: pointer;
		border-radius: 5px; 
}
.ing-list__txt button:hover {
    background-color: #9b1f34;
}
#nav-block{
 background:url("../images/ind-navi-bg.jpg");
 background-size: cover;
 padding-top:20px;
 padding-bottom:20px;
 margin-bottom:50px;
}
@media screen and (max-width:768px){
		#nav-block{
				padding:0;
		}
}
#nav-carname{
		padding:20px 22%;
		margin:auto;
}
.nav-carname__title{
		width:100%;
		background-color:#222;
		text-align:center;
		padding-top:5px;
		padding-bottom:5px;
		margin:0px; 
}
#nav-carname ul li{
	margin:10px 0.5% 10px 0; 
}
#nav-carname ul li a{
display: inline-block;padding:5px 40px;background:#000;border-radius: 10px;text-decoration:none;border:solid 1px #333;
}

#nav-carname ul li a:hover{
background-color:#931717;
}
@media screen and (max-width:768px){
		#nav-carname{
				padding:0 0 20px 0;
				margin:0px; 
		}
		.nav-carname__title{
		width:98%;
		}
			#nav-carname ul{
			margin:0px; 
			padding:0px; 
			}
		#nav-carname ul li{
	margin:0px; 
		padding:8px 3px; 
}

}
.cal-nav-block{
		width:100%;
}
.cal-nav-block__title{
		background-color:#931717;color:#fff;padding-top:10px;padding-bottom:10px;text-align:center;
}

.news-area-head{
		margin-top:100px;
}
.news-area__title{
		 text-align:center;
}
.news-area__title p{
		font-size:35px;
		 font-family: 'Oswald', sans-serif;
		 letter-spacing:0.2em;
}
.news-category{
		display:flex;
		justify-content: space-around;
    flex-wrap: wrap;
		margin-top:50px;
		margin-bottom:50px;
	
}

.news-category p{
		width:18%;
		border:1px #eee solid;
		margin-right:2%;
			box-sizing: border-box;
			text-align:center;
			line-height:2.5em;
}	
@media screen and (max-width: 480px) {
	.news-category p{
		width:100%;
		margin:10px 0;
	}
}
.news-category p a{
		display:block;
		text-decoration:none;
}
.news-category p a:hover{
		background-color:#931717;
}
.news_box{
		padding-bottom:50px;
		border-bottom:1px #eee solid;
}
.news_box img{
	width:auto;
}
.news_date{
		font-size:20px;
		font-family: 'Oswald', sans-serif;
		 letter-spacing:0.15em;
		 margin-top:100px;
}
.news_title{
		font-size:25px;
		font-weight:bold;
}
.news_img{
		margin:50px auto;
		width:80%;
}
.news_img img{
		width:100%;
}


/* カレンダー 
---------------------------------------------------------------------------*/
#calender{float:left;font-size:12px;text-align:center; margin:10px 0; width:100%;display:flex;color:#1D1D1D; font-family:SimHei,Geneva, Arial, Helvetica, sans-serif }
.cal-box{
		width:32%;margin-right:3%;
}
.cal-box:nth-child(3){
		;margin-right:0%;
}
#calender .month{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:13px;font-weight:bold;color:#fff;}
.cal td{text-align:center;padding:2px 5px;background:#000;color:#fff;}
td.bg,.ex,td.bg0{background:#70D2D9}
td.bg1,.ex1{background:#FFB720}
td.bg2,.ex2{background:#E03441}
td.bg3,.ex3{background:#A5A5A5}
td.bg4,.ex4{background:#A5DB82}
.cal-cap{width:100%;display:flex;
		justify-content: space-around;
    flex-wrap: wrap;text-align:center;}
.ex,.ex1,.ex2,.ex3,.ex4{padding-top:2px; padding-bottom:2px;font-size:10px;width:18%;margin:0;}
.ex3{margin-right:5%;}


/* 問い合わせ カレンダー */
.cal-bg-w>#calender .month{color:#000;}
.cal-bg-w>#calender .cal td{background:#fff;color:#000;}
.cal-bg-w>#calender td.bg,.cal-bg-w>#calender td.bg1,.cal-bg-w>#calender td.bg2,.cal-bg-w>#calender td.bg3,.cal-bg-w>#calender td.bg4{color:#fff;}
.cal-bg-w>#calender td.bg,.cal-bg-w>#calender .ex,.cal-bg-w>#calender td.bg0{background:#70D2D9}
.cal-bg-w>#calender td.bg1,.cal-bg-w>#calender .ex1{background:#FFB720}
.cal-bg-w>#calender td.bg2,.cal-bg-w>#calender .ex2{background:#E03441}
.cal-bg-w>#calender td.bg3,.cal-bg-w>#calender .ex3{background:#A5A5A5}
.cal-bg-w>#calender td.bg4,.cal-bg-w>#calender .ex4{background:#A5DB82}

/* BMW カレンダー 1/3 */
.cal_1{font-size:12px;text-align:center; margin:0 auto; width:200px;color:#1D1D1D; overflow:hidden; height:100%; background-color:#ffffff }
.cal_1 img{width:100%;}
.cal_1 .month{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:13px;font-weight:bold;}
.cal_1 .cal td{text-align:center;padding:0px 3px;background:#fff;color:#000;}
.cal_1 td.bg,.cal_1 .ex,.cal_1 .bg0{background:#70D2D9;color:#fff;}
.cal_1 td.bg1,.cal_1 .ex1{background:#FFB720;color:#fff;}
.cal_1 td.bg2,.cal_1 .ex2{background:#E03441;color:#fff;}
.cal_1 td.bg3,.cal_1 .ex3{background:#A5A5A5;color:#fff;}
.cal_1 td.bg4,.cal_1 .ex4{background:#A5DB82;color:#fff;}
.cal_ex{display:flex;margin-top:10px;justify-content: space-between;width:210px;}
.cal_1 .ex,.cal_1 .ex1,.cal_1 .ex2,.cal_1 .ex3,.cal_1 .ex4{width:20%;font-size:9px;}
@media screen and (max-width: 480px) {
		.cal_1{width:80%;}
		.cal_ex{width:100%;}
		.cal_1 .ex,.cal_1 .ex1,.cal_1 .ex2,.cal_1 .ex3,.cal_1 .ex4{font-size:11px;}

}


/*ポリシー
---------------------------------------------------------------------------*/
#policy{padding-bottom:100px;}
#policy ul{list-style-type: disc;padding-left:18px;}
#policy ol li{padding-left:5px;}
#policy ul li{width:100%;}
#policy a{text-decoration:underline;}

/*インストールギャラリー
---------------------------------------------------------------------------*/
#install_ditail{
	letter-spacing:0.03em;font-size:15px;line-height:1.8em;
}
.ing_panel{
	width:100%;
	background:#000;
	color:#fff;
	padding:10px 0;
	margin-top:30px;
}
.ing-clear{
		background-color:#b32034;
		color:#fff;
		 border-radius : 5px; 
		 width:200px;
		 border:none;
		 padding:5px;
}
.ing-clear-area{
	text-align:center;
	padding-top:20px;
}



#install_01 form select {
	background-color: #f2f4f5;
  border: none;
  border-radius: 3px;
  padding: 10px 15px;
  font-size: 16px;
  color: #333;
	margin-bottom:10px;
}


.kensaku-area{
	width:100%;
	display:flex;
	justify-content: space-around;
  flex-wrap: wrap;
}
.kensaku-area h4{
	width:100%;

	margin-top:0px;
}
.kensaku-area_2{
	width:48%;
	position: relative;
	padding-right:1%;
	padding-left:1%;
}
.kensaku-area_sekou{
	border-bottom:1px solid #ccc;
	padding-bottom:7px;
	margin-bottom:7px;
}
.kensaku-area_sekou input[type="checkbox"]{
  margin-left:10px;

}
.kensaku-area_sekou input[type="checkbox"]:first-child{
		margin-left:0;
}
/*拡大虫眼鏡*/
.zoom{
  margin-top: -34px; /* 上余白 */
  margin-left: 478px; /* 左余白 */
  margin-bottom:-8px;
    }
.zoom img,.zoom450 img{
	width:30px !important;
}
.zoom450{
  margin-top: -34px; /* 上余白 */
  margin-left: 478px; /* 左余白 */
  margin-bottom:-8px;
    }

@media screen and (max-width: 480px) {
	.zoom img,.zoom450 img{
		display:none;
	}
}

/*soundup-all
---------------------------------------------------------------------------*/
.soundup-all__plan{
		display:flex;
		flex-wrap: wrap;
		margin-bottom:100px;

}
.soundup-all__plan-data{

		width:48%;
		padding:1%;
}
.soundup-all__plan-data img{
		width:100%;
}
.soundup-all-list{
		padding:15px;
		background-color:#eee;
		margin-top:10px;
}
.soundup-all-list ul{
		display:table;
}
.soundup-all-list ol a{
		text-decoration:underline;
}
.soundup-all-list ol{
counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}
.soundup-all-list ol li:before{
		counter-increment: item;
	content: counter(item,decimal-leading-zero)'. ';
}
@media screen and (max-width: 480px) {
		.soundup-all-list{
		padding:5px;
		background-color:#eee;
		margin-top:10px;
		}
		.soundup-all__plan-data{
		width:100%;
		padding:0%;
		margin-bottom:50px;
		}

}

/*contact
---------------------------------------------------------------------------*/
.contact-box-h{border:3px #b32034 solid;line-height:2em;margin-top:50px;}
.contact-box-j{border:3px #333 solid;line-height:2em;margin-top:50px;}
.contact-box-h-title{color:#fff;font-weight:bold;font-size:14px;background-color:#b32034;margin-top:0px;padding:10px;}
.contact-box-j-title{color:#fff;font-weight:bold;font-size:14px;background-color:#333;margin-top:0px;padding:10px;}
.contact-box-content{padding:50px;font-size:16px;}
.contact-box-content a{text-decoration:underline;}
.input{padding-bottom:50px;}
.contact-box2{display: flex;flex-wrap: wrap;}
.form-title{width:30%;padding-bottom:10px;}
.form-content{width:70%;padding-bottom:10px;}
input , select , textarea , button{
box-sizing: border-box;
}
input, textarea {
  border: none;
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background: #f3f3f3;
  color: #333;
	}
textarea{
width:100%;
height:200px;
}
input[type="checkbox"]{
accent-color:#f3f3f3;
margin-right:10px;
}
.contact-form-area select{border: none;background: #f3f3f3;margin: 0.5rem 0;
  padding: 0.5rem 2rem;border-radius: 0.3rem;}
.mochikomi{
padding:20px;background-color:#eee;margin:100px auto;
}
input[type="button"],input[type="submit"]{background-color:#1c8a0b;color:white;border-radius: 0.3em; padding:15px 50px;margin-top:50px;

}
input[type="button"]:hover,input[type="submit"]:hover{background-color:#417038;}
@media screen and (max-width: 480px) {
	.contact-box-content{padding:10px;font-size:14px;}
	.contact-box2{display: block;}
	.form-title{width:100%;padding-bottom:0px;}
	.form-content{width:100%;}
}



/*（プランリスト)
---------------------------------------------------------------------------*/
.planlist{max-width:100%;margin:30px auto 100px auto;text-align: center;font-size:1.2rem;}

.planlist ul{display: inline-block;
    text-align: left;}

.planlist ul ul{padding-left:25px;}
.planlist a {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.planlist a::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right:-15px;
  bottom: 0;
  margin: auto;
}
.planlist hr{border-top: 1px dotted #ccc;margin-top:10px;}

/*（デッドニング)
---------------------------------------------------------------------------*/
.dbox .exe img{height:100%}
.dbox .exe td{background-color:#fff;}
.dbox_exe_date{color:#666;}


/*サイトマップ
---------------------------------------------------------------------------*/
.sm_list ul{display: grid;}
.sm_list ul li.sm_planname{padding-top:20px;}
.sm_list ul li{padding-left:100px;}
.sm_list ul a {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.sm_list ul a::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
	right: -30px;
  bottom: 0;
  margin: auto;
}






/*---------------------------------------------------------------------------
480px以下に適用されるCSS（スマホ用）
---------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {

/*カテゴリメニュー（news)
---------------------------------------------------------------------------*/

		#news ul{}
		#news li{width:46%;padding:2%;}

/*（event)
---------------------------------------------------------------------------*/
		dl.event_list{padding:10px; box-sizing:border-box;}
		dd.event_date{width:100%;}
		dd.event_name{width:100%;padding-right:0;font-size:14px;font-weight:bold;}
		dd.event_sanka{width:100%;padding:5px 0;}
		.event_sanka_ok{margin:0;width:100px;}
		dd.event_area{width: auto}
		dd.event_venue{width: auto;}
		dd.event_link{width:100%;padding-top:10px;}
		.event_link_ok{width:120px;padding:5px;}
		dd.event_houkoku{padding:10px 0 0 0;}
		dd.event_houkoku img{width:48%;padding:0 2% 0 0;margin:0;}

/*（inst_)
---------------------------------------------------------------------------*/
		.button01 a {width: 100%;padding: 1em;}
		.button{display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: repeat(3, 50px);
			}
		button{margin:auto;width:90%;}

/*（トップページ)
---------------------------------------------------------------------------*/
		.top-ing-box{
				position: relative;
				width:49%;
				margin-right:1%;
		}
		.top-ing-box:nth-child(2n) {
				margin-right:0;
		}
		
		.cal-nav-block{
				width:100%;
		}
		.cal-box{
				width:100%;margin-right:0;padding-top:20px;
		}
		.nav-area2{
			width:100%;
		}

/*カレンダー
---------------------------------------------------------------------------*/
/* カレンダー */
		#calender{font-size:13px;text-align:center; margin:10px auto; width:100%;display:block;}
		.cal td{text-align:center;padding:2px;}
		.bg,.ex,.bg0{background:#DDF4F3}
		.bg1,.ex1{background:#F5AC32}
		.bg2,.ex2{background:#F48679}
		.bg3,.ex3{background:#CCCCCC}
		.bg4,.ex4{background:#AFDA85}
		.ex,.ex1,.ex2,.ex3,.ex4{float:left;padding:2px 5px;width:15%;}
		.ex1,.ex2,.ex3,.ex4{margin-left:3px;}


/*インストールギャラリー
---------------------------------------------------------------------------*/
		.kensaku-area_2{
			width:100%;
			padding-right:0;
			padding-left:0;
		}
		.kensaku-area_plan{
			width:100%;
		}
		.kensaku-area_sekou input[type="checkbox"]{
			margin-bottom:10px;
		}
		.ing-clear{
			padding:10px;
			font-size:16px;
		}
		#install_01 form select {
			width:100%;
		}
}