@charset "utf-8";
/* CSS Document */
header ul li:nth-of-type(5) a {
    color: #000;
}
header ul li:nth-of-type(5) a:hover {
	text-decoration:none;
}
#main_v{
	background:url(../img/main_v_bg.jpg) center center/cover no-repeat;
	height:41.8rem!important;
	max-height:41.8rem!important;
	position:relative;
	z-index:1;
}
/* ieハック */
@media screen\0 {
#main_v.fadein{
	 transition-duration:0;
}
}

h1{
	position:absolute;
	left:0px;
	top:auto;
	bottom:-35rem;
}
h1.fadein.scrollin{
	top:auto;
	bottom:-30rem;
}
h2{
	font-size:3.4rem;
	text-align:center;
	margin-bottom:2em;
}
h2:first-child{
	margin-top:3em;
}
main ul.product{
	flex-wrap:wrap;
	max-width:830px;
	margin:0 auto;
}
main ul.product li{
	width:45.784%;
	margin-bottom:10rem;
	position:relative;
}
main ul.product li .icon{
	position:absolute;
	left:-1.5em;
	font-size:1rem;
	width:5em;
	height:5em;
	display:flex;
	justify-content:center;
	align-items:center;
	top:-3em;
	background-color:#d0580d;
	color:#FFF;
	border-radius:50%;
	z-index:-1;
	text-align:center;
	line-height:1.4;
}
main ul.product li .icon2{
	background-color:#c6ab61;
}
main ul.product li .flex a{
	width:34.211%;
}
main ul.product li .flex a img{
	width:100%;
}
main ul.product li .right{
	width:62%;
}
main ul.product li .right .ttl{
	background-color:#8f6a46;
	color:#FFF;
	margin-bottom:0.7em;
	display:inline-block;
	padding:0.1em 0.7em 0 0.7em;
}
main ul.product li .right .ttl + p{
	font-size:1.8rem;
	margin-bottom:0.1em;
}
main ul.product li .right .name{
	font-size:1.8rem;
	font-weight:bold;
	margin-bottom:0.2em;
}
.common_btn a {
    font-size: 1.8rem;
    padding: 0em 1.5em 0.5em 2em;
	border:none;
	box-shadow:none;
	display:inline-block;
	border-bottom:2px solid;
}
.common_btn a span:before {
    left: -2em;
}
.common_btn a:hover{
	color: #8f6a46;
	
}
.common_btn a:hover span:before {
    border-top: 0.1em solid #8f6a46;
    border-right: 0.1em solid #8f6a46;
}
.common_btn a:after {
	display:none;
}
#set{
	background:url(../img/set_bg.jpg) center top no-repeat;
	background-color:#E4EFF3;
	padding: 5rem 0 11rem 0;
	height:84.8rem;
	box-sizing:border-box;
}
#set h3{
	font-size:4rem;
	text-align:center;
	margin-bottom:0.4em;
}
#set h3 + p{
	font-size:2.6rem;
	text-align:center;
	margin-right:-10em;
	line-height:1.4;
	margin-bottom:0.3em;
}
#set h3 + p span{
	color:#841904;
	font-size:3.4rem;
}
#set h3 + p + p{
	font-size:1.8rem;
	text-align:center;
	margin-right:-15em;
}
#set h3 + p + p span{
	color: #D60017;
}
#set .mark {
    position: absolute;
    right: 10%;
    bottom: -178%;
}
#set .caption {
    position: absolute;
    right: 10%;
    bottom: -195%;
}

#set .btn{
	text-align:center;
}
#set .btn a {
    font-size: 2rem;
    color: #FFF;
    background: url(/top/img/btn_bg.png) 0 0 /cover no-repeat;
    padding: 0.8em 3.5em 0.8em 4.5em;
    transition-duration: 0.3s;
	margin-top:1em;
	margin-left: 10em;
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow: 0.1em 0.1em 0.2em 0em rgba(0,0,0,0.3);
}
#set .btn a:hover{
	background-color:#8f6a46;
}
#set .btn a span{
	position:relative;
}
#set .btn a span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.5em;
    margin-top: -0.3em;
    width: 0.5em;
    height: 0.5em;
    border-top: 0.1em solid #FFF;
    border-right: 0.1em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#set .btn a:after{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/*---------------------------------------------------------------
横幅768px～1130pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1130px) {
.common_btn a {
	margin-top:1em;
}

}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
header ul li:nth-of-type(5) a {
    color: #8f6a46;
}
#main_v {
    background: url(../img/main_v_bg_sp.jpg) center center/cover no-repeat;
    height: 95vw!important;
    max-height: 95vw!important;
}
h1 {
    bottom: -52rem;
	width:28%;
	left:auto;
	right:8%;
	position:absolute;
}
h1.fadein.scrollin {
	left:auto;
	right:8%;
    bottom: -47rem;
	position:absolute;
}
h2 {
    font-size: 2.6rem;
	text-align:left;
	margin-bottom:1em;
}
h2:first-child {
    margin-top: 2em;
}
main ul.product {
    max-width: 85%;
}
main ul.product li {
    width: 100%;
    margin-bottom: 3em;
}
main ul.product li div.flex{
	margin-bottom:1em;
}
main ul.product li .right .ttl + p {
    font-size: 1.6rem;
}
main ul.product li .right .name {
    font-size: 1.6rem;
	white-space:nowrap;
}

.common_btn a {
	margin-top:0em;
	font-size:1.6rem;
}
#set {
    background: url(../img/set_bg_sp.jpg) center top/100% no-repeat;
    padding: 4rem 0;
	padding-bottom:7em;
	margin-bottom:3em;
	height:auto;
}
#set h3 {
    font-size: 3rem;
    margin-bottom: 0.2em;
}
#set h3 + p {
    font-size: 1.6rem;
    margin-right: 0em;
}
#set h3 + p span {
    font-size: 1.8rem;
    margin-left: 0em;
}
#set h3 + p + p {
    font-size: 1.5rem;
    text-align: left;
    margin-right:0;
	padding-left:33%;
	margin-top:1em;
}
#set .btn a {
    font-size: 1.6rem;
    padding: 0.8em 1.5em 0.8em 2.5em;
    margin-top: 16.5em;
	bottom:-6.5em;
	margin-left:0px;
}
#set .caption {
    right: 1em;
    bottom: -2em;
}

 
}