@charset "utf-8";
/* CSS Document */

body#sub{
	background: url(../img/bk.jpg);
}

#header.revision{
	background: #2d1d0f url("../img/header.jpg") no-repeat 20% 0%;
	overflow: hidden;
}


@media screen and (max-width: 768px){
	#header.revision{
		background: #2d1d0f url("../img/sub_smart_top.jpg") no-repeat;
		overflow: hidden;
	}
}

#logo{
	width: 800px;
	margin: 0 auto;
	padding: 50px 0 20px;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	#logo{
		width: 100%;
		margin: 0 auto;
		padding: 0 0 5px 0;
		overflow: hidden;
		background: rgba(16,3,0,0.8);
		border-bottom: 1px #845d34 solid;
	}
}


h1#h1_sub{
	font-size: 150%;
	float:right;
	padding: 0;
	background: #4e3418;
  background: -webkit-linear-gradient(-45deg, #d0975b 30%, #4e3418 40%, #d0975b 65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


h1#h1_sub a,
h1#h1_sub a:hover{
	text-decoration: none;
}

h1#h1_sub .h1_1{
	font-size: 250%;
}

h1#h1_sub .h1_2{
	font-size: 100%;
}


@media screen and (max-width: 768px){
	h1{
		font-size: 80%;
		float:left;
		margin: 10px 0 0 5px;
	}
	
	.h1_1{
		font-size: 150% !important;
	}
	
	.br_2{
		display: none;
	}
}

.copy2{
	font-size: 80%;
	color: #aaaaaa;
	position: fixed;
	top: 150px;
	right: 30px;
}

@media screen and (max-width: 768px){
	.copy2{
		display: none;
	}
}

.nav_bk{
	margin-top: 15px;
	width: 100%;
	background: rgba(16,3,0,0.5);
	overflow: hidden;
}

ul.nav_sub{
	width: 1200px;
	margin: 0 auto;
	padding-inline-start:0;
}

ul.nav_sub li.button{
	text-align: center;
	float: left;
  padding: 10px 0;
  margin:0 0 3px 0;
  position: relative;
  text-decoration: none;
  display: inline-block;
	list-style: none;
	font-size: 120%;
	font-style: italic;
	color: #FFC778;
  background: -webkit-linear-gradient(left, #FFC778 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ul.nav_sub li.nav1{ width: 90px; margin: 22px 0 0 0 !important;}
ul.nav_sub li.nav2{ width: 150px;}
ul.nav_sub li.nav3{ width: 160px;}
ul.nav_sub li.nav4{ width: 170px;}
ul.nav_sub li.nav5{ width: 100px;}
ul.nav_sub li.nav6{ width: 225px;}
ul.nav_sub li.nav7{ width: 185px;}
ul.nav_sub li.nav8{ width: 100px;}
ul.nav_sub li.nav9{ width: 100px;}

ul.nav_sub li.nav_contact{
	display: none;
}

ul.nav_sub li a{
	color: #fff;
}

ul.nav_sub li a:hover{
	text-decoration: none;
	color: #fbe1bd;
}


ul.nav_sub li.button::before {
  content: '';
  position: absolute;
  bottom: 0%;
  left: 0px;
  width: 100%;
  height: 1px;
  background: -moz-linear-gradient(left, #311106, #FFC778);
  background: -webkit-linear-gradient(left, #311106, #FFC778);
  background: linear-gradient(to left, #311106, #FFC778);
  display: block;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}

ul.nav_sub li.button:hover::before {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1)
}




@media screen and (max-width: 768px){
	.nav_bk{
		margin-top: 0;
		background: rgba(16,3,0,0.8);
	}
	

	ul.nav_sub{
		width: 100%;
	}

	ul.nav_sub li.button{
		text-align: center;
		float: left;
	  padding: 5px 0;
	  margin:0;
	  position: relative;
	  text-decoration: none;
	  display: inline-block;
		list-style: none;
		width: 50%;
		height: 50px;
		font-size: 100%;
		font-style: italic;
		color: #FFC778;
	  background: -webkit-linear-gradient(left, #FFC778 0%, #ffffff 100%);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
		border-bottom: 1px #4f3418 solid;
		border-right: 1px #4f3418 solid;
	}
	
	ul.nav_sub li.nav1{
		margin: 0 !important;
	}
	
	ul.nav_sub li.nav_contact{
		display: block;
	}
}

.container_sub{
	width: 1000px;
	margin: 0 auto;
}


@media screen and (max-width: 768px){
	.container_sub{
		width: 90%;
		margin: 0 auto;
	}
}

.to-contact{
	margin: 20px auto;
	padding: 15px 30px;
	border: 1px #707070 solid;
	border-radius: 5px;
	font-family: "FOT-ニューセザンヌ ProN M";
	width: 250px;
	overflow: hidden;
	color: #707070;
}

.to-contact ion-icon{
	font-size: 14pt;
	float: left;
	margin: 4px 5px 0 0;
	color: #707070;
}


a:hover .to-contact{
	color: #9a1313;
	text-decoration: none;
}

.contact-p{
	float: left;
	font-size: 12pt;
	color: #707070;
}

@media screen and (max-width: 768px){
	.to-contact{
		display: none;
	}
}

.blog_date{
	text-align: right;
	color: #707070;
	margin-bottom: 80px;
}