﻿@charset "UTF-8";
/*タイトル ========================================================================*/
#main .ttl_main.after_service h1{
	background:linear-gradient(-90deg, rgba(0,0,0,.1) 50%,rgba(0,0,0,.9)) 50%,url(../img/ttl_after_service.jpg) no-repeat center center / cover;
	}

#main .btn_box{
	width:100%;
	height:auto;
	padding:0;
	margin-bottom:30px;
	}	
#main .btn_box ol{
	width:100%;
	padding:0;
	list-style-position:inside;
	position:relative;
  overflow:hidden;
	}
#main .btn_box ol li{
	position:relative;
	background-color:#eee;
  	padding:15px 27px;
	float:left;
	margin-bottom:10px;
	margin-right:37px;
	font-size:16px;
	}	
#main .btn_box ol li:hover{
	background-color:#96202f;
	color:#fff;
	cursor:pointer;
	}
#main .btn_box ol li.current{
	color:#fff;
	background-color:#96202f;
	}
#main .btn_box ol li.current:before{
	border-color:#96202f;
	border-left-color:transparent;
	}		
#main .btn_box ol li.current:after{
	border-left-color:#96202f;
	}
#main .btn_box ol li:before{
	content:"";
	display:block;
	width:0;
	height:0;
	position:absolute;
	top:0;
	left:-35px;
	border:27px solid transparent;
	border-color:#eee;
	border-left-color:transparent;
	}
#main .btn_box ol li:after{
	content:"";
	display:block;
	width:0;
	height:0;
	position:absolute;
	top:0;
	right:-54px;
	border:27px solid transparent;
	border-left-color:#eee;
	}
#main .btn_box ol li:first-child{
	padding-left:27px;
	}
#main .btn_box ol li:first-child:before{
	display:none;
	}
#main .btn_box ol li:hover:before{
	border-color:#96202f;
	border-left-color:transparent;
	transition:all .3s ease-out;
	}
#main .btn_box ol li:hover:after{
	border-left-color:#96202f;
	transition:all .3s ease-out;
	}
#main .box{
	padding:2% 1%;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	display:none;
	}	
#main figure{
	width:100%;
	margin:0;
	}	
#main figure img{
	width:49%;
	margin:5px 0.5%;
	float:left;
	}
#main .figure02 img{
	width:32.3%;
	margin:5px 0.5%;
	float:left;
	}		
#main .txt_box{
	width:98%;
	height:auto;
	margin:0 1% 20px;
	}	
#main .txt_box h3{
	font-weight:normal;
	margin:0;
	}
#main .txt_box.right{
	width:48%;
	margin:0 1%;
	float:left;
	}	
		

@media screen and (min-width:700px) and ( max-width:1050px){
#main .btn_box{
	width:100%;
	height:auto;
	padding:0;
	margin-bottom:30px;
	}	
#main .btn_box ol{
	width:100%;
	padding:0;
	list-style-position:inside;
	position:relative;
  	overflow:hidden;
	}
#main .btn_box ol li{
	position:relative;
	background-color:#eee;
  	padding:15px 20px;
	float:left;
	margin-bottom:10px;
	margin-right:37px;
	font-size:14px;
	}	
#main .btn_box ol li:hover{
	background-color:#96202f;
	color:#fff;
	cursor:pointer;
	}
#main .btn_box ol li.current{
	color:#fff;
	background-color:#96202f;
	}
#main .btn_box ol li.current:before{
	border-color:#96202f;
	border-left-color:transparent;
	}		
#main .btn_box ol li.current:after{
	border-left-color:#96202f;
	}
#main .btn_box ol li:before{
	content:"";
	display:block;
	width:0;
	height:0;
	position:absolute;
	top:0;
	left:-35px;
	border:27px solid transparent;
	border-color:#eee;
	border-left-color:transparent;
	}
#main .btn_box ol li:after{
	content:"";
	display:block;
	width:0;
	height:0;
	position:absolute;
	top:0;
	right:-54px;
	border:27px solid transparent;
	border-left-color:#eee;
	}
#main .btn_box ol li:first-child{
	padding-left:20px;
	}
#main .btn_box ol li:first-child:before{
	display:none;
	}
#main .btn_box ol li:hover:before{
	border-color:#96202f;
	border-left-color:transparent;
	transition:all .3s ease-out;
	}
#main .btn_box ol li:hover:after{
	border-left-color:#96202f;
	transition:all .3s ease-out;
	}
#main .box{
	padding:2% 1%;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	display:none;
	}	
#main figure{
	width:100%;
	margin:0;
	}	
#main figure img{
	width:49%;
	margin:5px 0.5%;
	float:left;
	}
#main .figure02 img{
	width:32.3%;
	margin:5px 0.5%;
	float:left;
	}		
#main .txt_box{
	width:98%;
	height:auto;
	margin:0 1% 20px;
	}	
#main .txt_box h3{
	font-weight:normal;
	margin:0;
	}
#main .txt_box.right{
	width:48%;
	margin:0 1%;
	float:left;
	}
}


@media screen and (max-width:700px){
#main .btn_box{
	display:none;
	}
#main .box{
	padding:5% 2%;
	border:solid 1px #ccc;
	background-color:#f9f9f9;
	display:block;
	position:relative;
	margin-bottom:30px;
	}
#main .box:after{
	border-top: 27px solid #96202f;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	content: "";
	position: absolute;
	bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
	left: 50%;/* 中央寄せに使用 */
	margin-left: -70px; /* 中央寄せに使用 */
	}
#main .box:last-child:after{
	border: none;
	}
#main figure{
	width:100%;
	margin:0;
	}	
#main figure img{
	width:100%;
	margin:0;
	float:none;
	}
#main .figure02 img{
	width:100%;
	margin:0;
	float:none;
	}
#main .txt_box{
	width:98%;
	height:auto;
	margin:0 1% 20px;
	}	
#main .txt_box h3{
	font-weight:normal;
	margin:0;
	}
#main .txt_box.right{
	width:98%;
	margin:0 1%;
	float:none;
	}
}