@charset "utf-8";
/* CSS Document */
/*--- 共通 ------------------------------------*/
.more{
	transition: all .3s;
	width:130px;
}
.more::after{
    display: inline-block;
    content: "";
    width: 130px;
    height: 1px;
    background: #f19233;
    position: absolute;
    bottom: -4px;
    left: 0;
    margin: auto;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.more::before{
    display: inline-block;
    content: "";
    width: 8px;
    height: 1px;
    background: #f19233;
    position: absolute;
    bottom: -1px;
    right: 0px;
    margin: auto;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all .3s;
}
.more:hover::after{
    padding-right: 10px;
	width: 130px;
}
.more:hover::before{
    right: -10px;
}

/*--- main_img ------------------------------------*/
#main_img .txt {
	bottom: 30vh;
	left: 50%;
	transform: translate(-50%,-50%);
}
#main_img .txt p:nth-of-type(1){
	width:900px;
}
#main_img .txt p:nth-of-type(2){
	padding:9px 15px 9px;
}
#main_img .top_contact{
	bottom: 6vh;
	right: 2%;
	width: 500px;
}
#main_img .top_contact .tel_box {
	width: 500px;
}

/*--- intro ------------------------------------*/
#intro #svg-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
#intro .intro_box img{
	box-shadow: 5px 5px 18px rgba(0,0,0,0.1);
}

/*--- feature ------------------------------------*/
#feature .bg_attach-fixed{
	margin-top:180px;
	background-image: url("../img/feature_bg.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size:cover;
	padding:150px 0 100px;
}
#feature .feature_title_box{
	padding: 80px 30px 20px 30px;
	border-radius: 50%;
	width: 800px;
	top:0px;
	left: 50%;
	transform: translate(-50%,-50%);
}
#feature .feature_title_box{
	background-image: url("../img/feature_icon.png");
	background-repeat: no-repeat;
	background-position: top 15px center;
	background-size: 60px;
}
#feature h3{
	bottom:40px;
	right:-10px;
}
#feature h4{
	background:linear-gradient(transparent 70%, rgba(241,146,51,0.3) 0%) ;
}
#feature .feature_box{
	padding:15px;
	transition: transform 0.8s;
}
#feature .feature_box:hover{
	transform: translate(0,-6px);
}
#feature .feature_box .txt_box{
	padding:6% 6% 7%;
	min-height: 265px;
	box-shadow: 0 0 18px rgba(0,0,0,0.1);
}
#feature .feature_box .txt_box::before{
  position: absolute;
  right:0;
  bottom: 0;
  content: '';
  border-top:7px solid #fff;
  border-left:7px solid #fff;
  border-right: 7px solid #f19233;
  border-bottom: 7px solid #f19233;
  box-sizing: border-box;
}
#feature .more_posi{
	bottom:10px;
	left: 50%;
	transform: translate(-50%,-50%);
}
#feature .more{
    width: 200px;
}
#feature .more::after{
    width: 200px;
}
#feature .more::before{
    bottom: 0px;
    right: 0px;
}
#feature .more:hover::after{
    padding-right: 10px;
	width: 200px;
}
#feature .more:hover::before{
    right: -10px;
}

/*--- contents ------------------------------------*/
#contents.bg_attach-fixed{
	background-image: url("../img/bg1.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size:cover;
	padding:100px 0 100px;
}
#contents #info table tr th:first-child{
	width: 120px;
	padding-left: 8px;
}
#news .more,#info .more{
	margin-left: auto;
	margin-top: 70px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*--- main_img------------------------------------*/
#main_img .txt {
	bottom: 20vh;
	left: 50%;
	transform: translate(-50%,-50%);
	width:80%;
	margin:auto;
}
#main_img .txt p:nth-of-type(1){
	width:100%;
	margin:0 auto 30px;
}
.top_contact{
	bottom: 8vh;
	width: 80%;
	left: 50%;
	transform: translate(-50%,20%);
}
#sp_main_img .top_contact .tel_box {
	width: 100%;
}
	
/*--- feature ------------------------------------*/
#feature .bg_attach-fixed{
	margin-top: 170px;
	padding:130px 0 50px;
}
#feature .feature_title_box{
	width: 80%;
}
#feature .feature_box{
	transition: none;
	margin-bottom: 10px;
}
#feature .feature_box:last-of-type{
	margin-bottom: 0;
}
#feature .feature_box .txt_box{
	min-height: auto;
}
#feature .more_posi{
	transform: translate(0%,0%);
}
#feature .more::after{
    width: 200px;
}
#feature .more::before{
    bottom: 0px;
    right: 0px;
}
	
/*--- contents ------------------------------------*/
#contents.bg_attach-fixed {
    padding: 90px 0 90px;
}
#news .more, #info .more {
    margin-top: 50px;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*--- sp_main_img------------------------------------*/
#sp_main_img .txt p:nth-of-type(2){
	padding:0px 15px 5px;
}
#sp_main_img .txt {
	bottom: 20vh;
	left: 50%;
	transform: translate(-50%,-50%);
	width:70%;
	margin:auto;
}
#sp_main_img .txt p:nth-of-type(1){
	width:80%;
	margin:0 auto 30px;
}
#sp_main_img .txt p:nth-of-type(2){
	padding:8px 15px 10px;
}

/*--- feature ------------------------------------*/
#feature .bg_attach-fixed{
	margin-top: 130px;
	padding:90px 0 50px;
}
#feature .feature_title_box {
	padding: 50px 10px 15px 10px;
	width: 85%;
	background-position: top 10px center;
    background-size: 40px;
}
#feature .feature_box{
	transition: none;
}
#feature .feature_box .txt_box{
	min-height: auto;
}
#feature .more_posi{
	transform: translate(0%,0%);
}
#feature .more::after{
    width: 200px;
}
#feature .more::before{
    bottom: 0px;
    right: 0px;
}
	
/*--- contents ------------------------------------*/
#contents.bg_attach-fixed {
    padding: 60px 0 65px;
}
#news .more, #info .more {
    margin-top: 35px;
}
}

/*IE*/
@media all and (-ms-high-contrast: none){
#feature .feature_box .txt_box{
	padding:5% 5% 6%;
	min-height: 260px;
}
}