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

header{
	transition-duration:1s;
	background:none;
}
header.bgcolor{
	background-color:#FFF;
}
header .logo{
	transition-duration:0.3s;
	opacity:0;
}
header .logo.show{
	opacity:1;
}
header .logo + .flex{
	transition-duration:0.3s;
	opacity:0;
}
header .logo + .flex.show{
	opacity:1;
}
header .btn a{
	transition-duration:0.3s;
	opacity:0;
}
header .btn a.show{
	opacity:1;
}
#main_v{
	margin-top:-10.5rem;
	text-align:center;
	position:relative;
	overflow:hidden;
}
#main_v .box{
	display:inline-block;
	position:relative;
}

#main_v h1{
	position:absolute;
	top:14.5rem;
	left:0px;
	z-index:1;
	transition-duration:2s;
	opacity:1;
	margin-left:0rem
}
#main_v h1.left_move{
	left:0%;
	transition-duration:0s;
	margin-left:0rem
}
#main_v h1.right{
	position:absolute;
	top:14.5rem;
	left:50%;
	z-index:1;
	opacity:1;
	margin-left:-22rem
}
#main_v h1 img{
	transition-duration:2.5s;
	opacity:0;
}
#main_v h1 img.show{
	opacity:2;
}
#main_v h1 .text01{
	position:absolute;
	left:32rem;
	top:0px;
}
#main_v h1 .text02 {
    position: absolute;
    left: 28.5rem;
    top: 5rem;
}
#main_v h1 .text03 {
    position: absolute;
    left: 23.5rem;
    top: 9rem;
}
#main_v h1 .text04{
	position:absolute;
	left:18rem;
	top:0px;
}
#main_v h1 .text05 {
    position: absolute;
    left:13.5rem;
    top: 5rem;
}
#main_v h1 .text06 {
    position: absolute;
    left: 9rem;
    top: 13rem;
}


#main_v .bg{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	background:url(../img/main_bg.jpg) center center /cover no-repeat;
	transition-duration:1s;
	opacity:0;
}
#main_v .bg.show{
	animation: zoom 3s cubic-bezier(0.25, 0, 0.25, 1);
	opacity:1;
}
@keyframes zoom{
  0% {
	  transform:scale(1.2);
  }
  100% {
	  transform:scale(1);
  }
}
#main_v .img{
	text-align:center;
	padding-top:12rem;
	transition-duration:1s;
	opacity:0;
	position:relative;
	z-index:0;
}
#main_v .img.show{
	opacity:1;
}
#main_v .img img{
	margin-left:-5rem;
}
#main_v .ripples{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
}
#main_v .ripples canvas{
	height:100%;
	width:100%;
}
#concept img{
	position:absolute;
	right:0px;
	top:18.5rem;
}
#concept img.scrollin{
	top:13.5rem;
}
#concept .box{
	margin-top:30rem;
	background-color:#FFF;
	display:inline-block;
	position:relative;
	z-index:1;
	margin-left:4%;
	transition-duration:1.5s;
	top:5em;
	opacity:0;
}
#concept .box.show{
	opacity:1;
	top:0em;
}
#concept .box p.text1{
	line-height:2.5;
	margin-bottom:1em;
	padding-top:3em;
}
p span.space{
	display:block;
	height:1em;
}
#concept .box p.text2{
	font-size:2.6rem;
}
#concept .box p.text3{
	font-size:4.3rem;
	display:inline-block;
	position:relative;
	overflow:hidden;
}
#concept .box p.text3:before{
	display:none;
  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;
  }
}
#concept .box .caption{
	font-size:1.2rem;
	margin-bottom:2em;
}
.btn_read a{
	display:inline-block;
	color:#000;
	font-size:1.5rem;
	padding:0 1.5em 1em 2.5em;
	position:relative;
    transition-duration: 0.3s;
}
.btn_read a:before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0.7em;
    width: 0.5em;
    height: 0.5em;
    border-top: 0.1em solid #000;
    border-right: 0.1em solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
}
.btn_read a:after{
	position:absolute;
	bottom:0px;
	right:0px;
	content:"";
	display:block;
	width:100%;
	height:2px;
	background-color:#000;
	transition-duration:0.3s;
}
/* ieハック */
@media screen\0 {
.btn_read a:after{
	height:1px;
}
}
.btn_read a:hover{
	color:#8f6a46;
}
.btn_read a:hover:before{
    border-top: 0.1em solid #8f6a46;
    border-right: 0.1em solid #8f6a46;
}
.btn_read a:hover:after{
	background-color:#8f6a46;
}
.bg01{
	background:url(../img/main_bg01.jpg) center top/ 100% no-repeat,url(../img/bg_gray.jpg);
	padding-bottom:17rem;
}
h2{
	text-align:center;
}
h2 span{
	display:inline-block;
	position:relative;
}
h2 span .img{
	position:absolute;
	left:-20rem;
	top:9rem;
}
h2 span.text{
	font-size: 1.8rem;
    position: absolute;
    right: -22em;
    top: 7em;
	line-height:1.8;
    text-align: left;
}
h2 span.caption{
	font-size: 1.2rem;
}
#omoi{
	padding-top:10rem;
}
#omoi .rain{
	height:54.4rem;
	background:url(../img/omoi_bg_rain.jpg) 0 top/cover no-repeat;
	margin-top:12rem;
}
#omoi .box{
	width:58.25%;
	box-sizing:border-box;
	margin-left:41.75%;
	padding-right:0px;
	margin-top:-43.1%;
	position:relative;
}
#omoi .box div{
	padding:6% 0 13% 13%;
	background-color:#FFF;
}
#omoi .box .upper{
	height: 3rem;
    width: 100%;
	position:absolute;
	left:0px;
	top:0px;
}
#omoi .box h3{
	font-size:2.6rem;
	margin-bottom:0.8em;
	position:relative;
	z-index:1;
}
#omoi .box h3 + p{
	line-height:2;
	margin-bottom:0.8em;
	position:relative;
	z-index:1;
	
}
#omoi .box .caption{
	font-size:1.2rem;
	margin-bottom:3em;
	position:relative;
	z-index:1;
}
#omoi .box img{
	position:absolute;
	bottom:0px;
	width:59.67%;
	left:-59.67%;
}

#power{
	margin-top:13rem;
}

#power h2 span .img {
    left: -31rem;
}
#power ul{
	width:80.8%;
	margin:0 auto;
	margin-top:8rem;
}
#power ul li{
	width: 45.662%;
	position:relative;
	text-align:center;
	margin-top:7rem;
}
#power ul li img{
	width:100%;
	margin-bottom:0.5em;
}
#power ul li .ttl{
	position:absolute;
	right:1em;
	top:-1.5em;
}
#power ul li .caption{
	
	font-size:1.2rem;
	margin-left:1em;
}
#power ul li .btn_read{
	text-align:center;
	margin-top:1em;
}
#power ul li .caption{
	text-align:left;
	margin-top:1.5em;
}
.step_bg{
	padding-top:14rem;
	padding-bottom:10rem;
	top:0px;
	position:relative;
}
.step_bg:after{
	content:"";
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	pointer-events:none;
	z-index:-1;
  	transition :1.5s;
	background:url(../img/step_bg.jpg) 0 top/100% no-repeat;
  opacity: 0;
}
.step_bg.show:after{
  opacity: 1;
}

#step h2{
	margin-bottom:8rem;
}
#step h2 span.text {
    top: 4em;
}
#step ul{
	width:85.437%;
	margin:0 auto;
}
#step ul li{
	width:43.069%;
	position:relative;
	margin-bottom:12rem;
}
#step ul li img{
	width:100%;
}
#step ul li .ttl{
	position:absolute;
	left:-1em;
	top:-1.5em;
}
#step ul li .text{
	text-align:center;
	margin:0.7em 0 0.3em 0;
}
#step ul li .name{
	font-size:2rem;
	text-align:center;
	margin-bottom:0.3em;
}
#step ul li .price{
	font-size:1.4rem;
	text-align:center;
}
#step ul li .common_btn a {
	margin-top:1em;
	letter-spacing:0.2em;
	font-size:1.8rem;
	border:none;
	border-bottom:solid 2px #000;
    padding: 0.5em 1.5em 0.5em 2em;
	box-shadow:none;
}
#step ul li .common_btn a:hover{
	color: #8f6a46;
	border-bottom:solid 2px #8f6a46;
	background:none;
}
#step ul li .common_btn a span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2em;
    margin-top: -0.3em;
    width: 0.5em;
    height: 0.5em;
    border-top: 0.15em solid #000;
    border-right: 0.15em solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.3s;
    transition-duration: 0.3s;
}
#step ul li .common_btn a:hover span:before {
    border-top: 0.15em solid #8f6a46;
    border-right: 0.15em solid #8f6a46;
}
#step ul li .common_btn a:after {
	display:none;
}
#step ul li .caption{
	margin-top:1.5em;
}
.btn_black{
	text-align:center;
}
.btn_black a{
	font-size:2rem;
	text-align:center;
	display:inline-block;
	background-color:#841905;
	padding:1em 0em;
	width:45rem;
	color:#FFF;
	position:relative;
	font-weight:bold;
	margin-top:-1em;
	margin-bottom:3em;
	transition-duration:0.3s;
	text-indent:1.5em;
}
.btn_black a:hover{
	background-color:#8f6a46;
}
.btn_black a span{
	position:relative;
}
.btn_black a span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2em;
	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;
}
#step .btn_black + .caption{
	width:85.437%;
	margin:0 auto;
}
#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: -9.3em;
	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(../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: 10.5em;
	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;
    width: 0.5em;
    height: 0.5em;
	margin-top:-0.3em;
    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;
  }
}

#btn_set a{
	display:none;
	transition-duration:0.3s;
	opacity:0;
}
#btn_set a.show{
	opacity:1;
}
/*---------------------------------------------------------------
横幅768px～1130pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1130px) {
#main_v .img {
    padding-top: 20rem;
}
#main_v .img img {
    margin-left: 0rem;
    width: 100%;
}
#concept img {
    width: 50%;
}
#omoi .box {
    margin-top: -66%;
}
#omoi .box div {
    margin-top: -1px;
}
h2 span.text {
    font-size: 1.9vw;
}
#power ul li .ttl{
	text-align:right;
}
#power ul li .ttl img{
	width:80%;
}
#step ul li .name {
    font-size: 2.3vw;
}
	
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {


#main_v {
    margin-top: -23.4vw;
	height:182vw;
}
main img {
    width: 123%;
}
#main_v .img img {
    margin-left: -15%;
}
#main_v .bg {
    background: url(../img/main_bg_sp.jpg) center center /cover no-repeat;
}
#main_v h1 {
    top: 9.5rem;
	left:-12vw;
	opacity:1;
	margin-left:0rem
}
#main_v h1 img {
	width:5vw;
}
#main_v h1 .text02 {
	width:3.7vw;
	top:4rem;
	left: 29rem;
}
#main_v h1 .text03 {
    left: 24.8rem;
    top: 7rem;
    width: 4.8vw;
}
#main_v h1 .text04 {
    left: 20rem;
}
#main_v h1 .text05 {
	width:4.3vw;
	left: 16.5rem;
    top: 3rem;
}
#main_v h1 .text06 {
    left: 13rem;
    top: 9rem;
    width: 4.8vw;
}

#main_v .img {
    padding-top: 22rem;
}
#concept .inner{
	padding:0px;
}
#concept img {
    position: relative;
    top: auto;
	width:100%;
}
#concept img.scrollin {
    top: 0rem;
}
#concept .box {
    margin-top: 0rem;
    display: block;
    margin-left: 0%;
	padding-left:12vw;
}
#concept .box p.text1 {
    margin-bottom: 2em;
    padding-top: 2.5em;
}
#concept .box p.text2 {
    font-size: 1.8rem;
}
#concept .box p.text3 {
    font-size: 2.9rem;
}
.btn_read{
	text-align:center;
}
.btn_read a:after {
    width: 100%;
}
#concept .btn_read{
	margin-left:-12vw;
}
.bg01 {
    background: url(../img/main_bg01_sp.jpg) center top/ 100% no-repeat,url(../img/bg_gray.jpg);
    padding-bottom: 12rem;
}
#omoi {
    padding-top: 13rem;
}

h2 span{
	width:20%;
}
h2 span .img {
    left: -13rem;
    width: 28vw;
}
#omoi .rain {
    height: 68vw;
	background: url(../img/omoi_bg_rain_sp.jpg) 0 0/cover no-repeat;
    margin-top: 7rem;
}
#omoi .box {
    width: 109%;
    margin-left: -2%;
    padding-right: 0px;
    margin-top: -16vw;
	margin-right:-6%;
}

#omoi .box h3 {
    font-size: 2rem;
}
#omoi .box img {
	display:none;
}
#omoi .box div .btn_read {
    width: 97vw;
    margin-left: -13vw;
}
#omoi .box .upper {
    top: 0.2rem;
}
#power h2 span .img {
    left: -20rem;
    width: 45vw;
}
#power h2 span.text {
    font-size: 1.6rem;
    position: relative;
    right: auto;
    top: auto;
    width: 80vw;
    margin-top: 3em;
    margin-left: -28vw;
}
#power ul {
    margin-top: 5rem;
	flex-wrap:wrap;
	width:100%;
}
#power ul li {
    width: 100%;
	margin-bottom:5em;
	margin-top:0px;
}
#power ul li:last-child{
	margin-bottom:0px;
}
#power ul li .ttl {
	width:13%;
}

.step_bg{
    padding-top: 10rem;
}
.step_bg:after {
    background: url(../img/step_bg_sp.jpg) 0 top/100% no-repeat;
}
#step h2 span{
	width:15%;
	margin-right: -10vw;
}
#step h2 span.text {
    font-size: 1.6rem;
    position: relative;
    right: auto;
    top: auto;
    width: 86vw;
    margin-top: 2em;
    margin-left: -38vw;
}
#step h2 span.caption {
	width:100%;
}
#step ul li {
    width: 100%;
    margin-bottom: 5rem;
}
#step ul li > a{
	pointer-events:none;
}
#step ul li:last-child {
    margin-bottom: 7rem;
}
#step ul li .ttl {
    top: -1em;
    width: 25%;
}
#step ul li .name {
    font-size: 1.9rem;
}
#step ul li .price {
    font-size: 1.6rem;
}
#step ul li .common_btn a {
	margin-top: 1.5em;
	font-size:1.6rem;
}
#step ul li .arrow{
	margin-top:5rem;
	text-align:center;
}
#step ul li .arrow img{
	width:25%;
}
.btn_black a {
    font-size: 1.6rem;
    width: 29rem;
	 margin-top: 0em;
	 margin-bottom:4em;
}
#step .btn_black + .caption {
    width: 100%;
}
#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: 2.8rem;
    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;
}

 
}