@charset "utf-8";
/* CSS Document */
body {
  font-family: 'Noto Sans JP', sans-serif;
	/*background:#ede8df;*/
	background: none;
}


.showroom_box{
		background:#ede8df;
	padding: 50px 0;
	margin-bottom: 50px;
	
}


@media print, screen and (min-width: 768px){
.showroom_box{
		background:#ede8df;
	padding: 100px 0;
	margin-bottom: 100px;
	
}	
	
	
}





/* メインビジュアル */

.conA{
	
	/*height: 100vh;*/
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}



.conA .container {
  text-align: center;
  padding-top: 50px;
  
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
	
	.conA{
		
		/*margin-bottom: 60px;*/
	}
	
  .conA .container {
    padding-top: 60px;
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
  }

}





/*基本記事*/

.post{
	margin-bottom: 30px;
}



.post .container {
  max-width: 960px;
  padding: 0 1em;
  margin-bottom: 0px;
	box-sizing: border-box;
}







/*２カラム＋テキスト大　宇部市で初めての外壁塗装ショールーム～*/

.conC{
	margin-bottom: 0px;
}

.conC .container{
	width: 90%;
	margin: 0 auto;
	border-radius: 30px;
	font-size: 14px;
	max-width: 1100px;
	padding: 1em;
	box-sizing: border-box;
	background: none;
}

.conC .img{
	text-align: center;
	margin-bottom: 20px;
}


.conC .text{
	margin-bottom: 0px;
	line-height: 1.6em;
	font-size: 24px;
	text-align: center;
}


.conC .text p{
	line-height: 2em;
}



@media print, screen and (min-width: 768px){
	
	.conC{
		margin-bottom: 10px;
	}
	
	.conC .container{
		display: flex;
		justify-content: space-around;
		padding:60px 30px 40px 30px;
		font-size: 15px;
		
		
	}
	
	.conC .img{
		width: 50%;
		margin-bottom: 0;
	}	
	
	.conC .text{
		width: 50%;
		padding: 0 1em;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.conC .text p{
		font-size: 40px;
		font-weight: bold;
	}

}











/*２カラム*/


.conD{
	width: 96%;
	max-width: 1100px;
	margin: 0 auto 30px;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background: none;
	padding: 0;
}


.conD .container{
	width: 98%;
	max-width: 1100px;
	margin: 0 auto 30px;
	padding:2em 1em;
	box-sizing: border-box;
}

.conD .logo{
	text-align: center;
	width: 100px;
	margin: 0 auto 20px;
}

.conD h2{
	text-align: center;
	color: #fff;
	margin-bottom: 1em;
	line-height: 1.4em;
	font-size: 20px;
}

.conD .text{
	padding:1em;
	box-sizing: border-box;
}

.conD .img{
	padding: 1em;
	box-sizing: border-box;
}

.conD p{
	line-height: 1.6em;
	margin-bottom: 1em;
}


.conD.p2{
	margin-bottom: 10px;
}

.conD.p2 .container{
	margin-bottom: 0;
	padding-bottom: 0;
}

@media print, screen and (min-width: 768px){
	
	.conD{
		padding: 0px 30px;
		border-top-left-radius: 40px;
	border-top-right-radius: 40px;
		margin-bottom: 80px;
	}

	
	.conD .container{
		display: flex;
		justify-content: space-around;
		/*padding: 50px;*/
		flex-direction: row-reverse;
		padding-top: 0;
	}
	
.conD .text{
	width: 50%;
}

.conD .img{
	width: 45%;
}
	
	.conD.p2{
		margin-bottom: 20px;
	}	
	

}












/*動画*/
.v01 {
  display: block;
  width: 90%;
  max-width: 700px;
  height: auto;
  text-align: center;
  margin: 10px auto 30px;
	cursor: pointer;
}





.v02 {
  display: block;
  width: 80%;
  max-width: 270px;
  height: auto;
  text-align: center;
  margin: 10px auto 60px;
	cursor: pointer;
}








/*予約ボタン*/

.yoyaku{
	margin-bottom: 50px;
}


.yoyaku a{
	display: block;
	margin: 0 auto;
	color: #fff;
	background: #D91219;
	text-align: center;
	width: 80%;
	max-width: 700px;
	padding: 0.8em 1em;
	box-sizing: border-box;
	font-weight: bold;
	text-decoration: none;
	border-radius: 10px;
	font-size: 18px;
}

@media print, screen and (min-width: 768px){
	
	.yoyaku{
		margin-bottom: 80px;
	}	
	
	
.yoyaku a{
	font-size: 30px;
}
}







/*Googleマップ、ショールームテキスト*/

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.add{
	font-weight: bold;
	margin-bottom: 1.5em;
	text-align: center;
}


@media print, screen and (min-width: 768px){
	
.add{
	font-size: 20px;
}	
	
}





/*画像4枚*/
.conE .container{
	max-width: 1100px;
	padding: 1em;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto 50px;
}

.conE .text{
	width: 48%;
	text-align: center;
	margin-bottom: 20px;
}

.conE img{
	/*margin-bottom: 20px;*/
}

.conE p{
	font-weight: bold;
	line-height: 1.6em;
	color: #333;
}

@media print, screen and (min-width: 768px){
	
.conE .container{
	margin-bottom: 80px;
}	
	
.conE .text{
	flex: 1;
	margin-bottom: 0;
}
	
.conE p{
	font-size: 22px;
}
	
	
.conE.image .container{
	margin-bottom: 80px;
	justify-content: center;
	gap:20px;
}	
	
	
.conE.image .text{
	flex:none;
	width: 30%;
	margin-bottom: 20px;
}	
	
	
}








/*こんな方はぜひ*/



.list15 h2{
	border: none;
	color: #d85a24;
	margin-bottom: 1.2em;
	padding: 0;
	font-size: 22px;
	text-align: center;
	line-height: 1.4em;
}


.list15 {
  margin: 2em 10px 50px;
  padding:2em 1em;
  border: dashed 2px #e2973b;
  border-radius: 8px;
  background: #f9e9dc;
  box-shadow: 0 0 0 10px #f9e9dc;
	box-sizing: border-box;
}
.list15-title {
  position: relative;
  font-size: 1.3em;
  padding: 4px 0 4px 12px;
  color: #de801e;
  font-weight:bold;
  text-align: center;
}
.list15 ul,.list15 ol {
  position: relative;
  margin: 0;
  padding: 0 0.5em 0 0.5em;
  color: #111;
  border: none;
  list-style-type: none;
}
.list15 ol {
  counter-reset: number;
}
.list15 ul li,.list15 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px #e2973b;
}
.list15 ul li:before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f14a";
  left : 0.5em;
  color: #de801e;
}
.list15 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #de801e;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list15 ul li:last-of-type,.list15 ol li:last-of-type{
  border-bottom: none;
}


@media print, screen and (min-width: 768px){
	.list15{
		padding: 3em;
		margin-bottom: 80px;
	}
	
	.list15 h2{
		text-align: center;
		font-size: 28px;
	}
	
	.list15 li{
		font-size: 18px;
	}
	
}







/*どこを、どのように～リスト*/

.list01 ul{
	color: #d85a24;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 20px;
}

.list01 li{
	margin-bottom: 0.6em;
}

@media print, screen and (min-width: 768px){
	
.list01 ul{
	font-size: 22px;
}
}






/*見出し*/


h2.midashi{
	color: #534741;
	text-align: center;
	margin-bottom: 1em;
	border: none;
	padding: 0;
	font-size: 18px;
	line-height: 1.6em;
	font-size: 28px;
}



/*h3{
	padding: 0.5em 0.5em 0.5em 1em;
	box-sizing: border-box;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 1em;
	color: #fff;
	background: #534741;
	font-size: 18px;
}
*/


h4.midashi4_01{
	color:#534741;
	border-bottom: 2px solid #de801e;
	padding-bottom: 0.5em;
	width: 90%;
	max-width:1000px;
	margin: 0 auto 1em;
	font-size: 20px;
}

h4.midashi4_02{
	color:#534741;
	border-bottom: 2px solid #667740;
	padding-bottom: 0.5em;
	width: 90%;
	max-width:1000px;
	margin: 0 auto 1em;
	font-size: 20px;
}


h5{
	margin-bottom: 1em;
}

@media print, screen and (min-width: 768px){
	
h2.midashi{
	font-size: 52px;
	margin-bottom: 1.2em;
}	
	
/*h3{
	font-size: 24px;
	margin-bottom: 2em;
}*/
	
h4.midashi4_01{
	font-size: 26px;
	margin-bottom: 1.5em;
}
	
h4.midashi4_02{
	font-size: 26px;
	margin-bottom: 1.5em;
}
	
h5{
	font-size: 18px;
}	
	
	
}







/*こんな方におすすめ*/

.kakomi{
	background: #fff;
	width: 100%;
	max-width: 800px;
	margin: 0 auto 20px;
	padding:1em;
	box-sizing: border-box;
	box-shadow: 0px 0px 2px #7f6d61;
	border-radius: 10px;
}


@media print, screen and (min-width: 768px){
	
.kakomi{
	padding:2em;
}	
	
}


/*社長コメント*/



.conF{
	margin-bottom: 50px;
}

.conF .container{
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
	background:#efe584;
	padding:40px 30px 30px;
	box-sizing: border-box;
	border-radius: 30px;
	font-size: 14px;
}



.conF h2 {
    color: #534741;
	margin-bottom: 0.5em;
	font-size: 22px;
	line-height: 1.4em;
	text-align: center;
}



.conF .img{
	text-align: center;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.4em;
}


.conF .img img{
	margin-bottom: 20px;
}



@media print, screen and (min-width: 768px){
	
	.conF{
		margin-bottom: 100px;
	}
	
	.conF .container{
		display: flex;
		justify-content: space-around;
		padding:40px 30px 40px 30px;
		font-size: 15px;
		
	}	
	
	
	.conF .img{
		width: 14%;
		margin-bottom: 0;
	}	
	
	.conF .text{
		width: 80%;
		padding: 0 1em;
	}
	
	.conF h2{
		font-size: 26px;
		text-align: left;
		margin-bottom: 1em;
	}
}






.midashi3{
	background:#fff;
	padding: 20px;
	margin-bottom: 30px;
}

.midashi3 .container{
	max-width: 1100px;
	margin: 0 auto;
	padding: 1em;
	box-sizing: border-box;
	background-color:none;
	padding-top: 0;
}


.midashi3 h3{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 1em;
	line-height: 1.4em;
	text-align: center;
}


.midashi3 .text02{
	text-align: center;
}

.midashi3 img{
	margin-bottom: 10px;
}


.midashi3 .point{
	width: 50px;
}

@media print, screen and (min-width: 768px){
	
	.midashi3{
		margin-bottom: 50px;
	}
	
.midashi3 .container{
	display: flex;
	justify-content: space-around;
	padding: 10px;
}
	
	
	
.midashi3 .text01{
	width: 10%;
}
.midashi3 .text02{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 50%;
}
.midashi3 .text03{
	width: 30%;
}	
	
	
.midashi3 .point{
	width: 90px;
}	

	
.midashi3 h3{
	font-weight: bold;
	font-size: 30px;
}	
	
	
}


.present-box{
	
padding: 2em;
	box-sizing: border-box;
	width: 90%;
	max-width: 960px;
	margin: 0 auto 30px;
	background: #f9e9dc;
}


.present-box .text01{
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 20px;
}


.present-box .text01 img{
	width: 70%;
}

.present-box .text02{
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
}

.present-box .text02 img.sarani{
	position: absolute;
	top:-10px;
	left: 10px;
	width: 80px;
}


.present-box .text02 img{
	width: 80%;
}


.joken{
	font-weight: bold;
	margin-bottom: 0.5em;
}

.pre01{
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 0.5em;
	color: #534741;
	line-height: 1.4em;
}

.pre02{
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 0.5em;
	color: #D62F34;
	line-height: 1.4em;
}

@media print, screen and (min-width: 768px){
	
.present-box{
	padding: 40px;
	display: flex;
	justify-content: space-around;
	
}
	
	
	.present-box .text01{
		width: 45%;
		margin-bottom: 0;
		padding: 40px 20px 30px;
	}	
	
	.present-box .text02{
		width: 45%;
		padding: 40px 20px 30px;
	}
	
.joken{
	font-size: 20px;
}
	
.pre01{
	font-size: 26px;
	margin-bottom: 0.5em;
}

.pre02{
	font-size: 30px;
	margin-bottom: 0.5em;
}	
	
	
.present-box .text02 img.sarani{
	top:-10px;
	left: 30px;
	width: 110px;
}	
	
	
	
}