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

@font-face{
font-family:'Bradley_Hand_ITC';
src:url('../font/Bradley_Hand_ITC.ttf')format('truetype');
}

@font-face{
font-family:'YuMin_36pKn-Demibold';
src:url('../font/YuMincho_0.ttf')format('truetype');
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/**, *:before, *:after {
    box-sizing: inherit;
}*/

*::selection {
    color: #fff;
    background-color: #ff6600;
}

html, body {
    position: relative;
    height: 100%;
	margin: 0;
    padding: 0;
    }

html{
	font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,selif;
	font-size: 100%;
	font-weight:500;
	color:#000;
	}
	
body{
	font-size:0.8rem;
	letter-spacing:0.1rem;
	-webkit-font-smoothing: antialiased;
	}

a img{
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	}

img{
	display: block;
	margin: 0;
	padding: 0;
	vertical-align:bottom;
    height: auto;
	}
	
a{
	color: #000;
	font-weight:600;
	text-decoration:none;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	cursor:pointer;
	font-family :'Noto Sans Japanese', sans-serif; 
	
}

a:hover{
	color: #888;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	}
	
p{
	margin:0;
	padding:0;
	font-size:0.7rem;
	text-align: justify;
	}

ul{
	margin:0;
	padding:0;
	}

li{
	list-style:none;
	}
	
.cf{
	clear:both;
	}

br{
	margin:0;
	}

span{
	display:block;
}

h1,h2,h3{
	text-align:center;
	font-weight:600;
	}

h1 img{
	width:22rem;
	margin: 5rem auto;
}

h3{
	font-size:3rem;
	margin:2rem 0 8rem 0;
}

nav{
	text-align:center;
	margin:0 0 1rem 0;
}

nav a{
	display:inline-block;
	margin:0 0.5rem;	
}


.container {
    width: 100%;
    overflow: hidden;
	/*background: url(../img/bg01.jpg) repeat-y 0 0;*/
}

.wrapper {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
}

section {
    margin: 0 0 20rem;
    overflow: hidden;
    clear: both;
}

/**KV**/

.kv{
    height: 960px;
	position:relative;
}

.kv h2 img{
	position: absolute;
    top: 15rem;
    left: 50%;
    margin-left: -170px;
    width: 340px;
}

.kv .concept{
    color: white;
    position: absolute;
    top: 36rem;
    left: 50%;
    margin-left: -170px;
    width: 340px;
}

.kv .concept h3{
	font-size:2.5rem;
	margin:0 0 2rem 0;
}

.kv .concept p{
	font-size: 1.25rem;
    text-align: left;
	margin:0 0 0 1rem;
}


/*MASK*/

.T {
    position: absolute;
    top: 0px;
    left: 7px;
    width: 100%;
    height: 7px;
    background: url(../img/T.png) repeat-x 0 0;
}
.R {
    position: absolute;
    top: 7px;
    right: 0px;
    width: 7px;
    height: 100%;
    background: url(../img/R.png) repeat-x 0 0;
}
.B {
    position: absolute;
    bottom: 0px;
    left: 4px;
    width: 100%;
    height: 7px;
    background: url(../img/B.png) repeat-x 0 0;
}
.L {
    position: absolute;
    top: 7px;
    left: 0px;
    width: 7px;
    height: 100%;
    background: url(../img/L.png) repeat-x 0 0;
}
.TL {
    position: absolute;
    width: 7px;
    height: 7px;
    top: 0px;
    left: 0px;
    background: url(../img/TL.png) no-repeat 0 0;
}
.TR {
    position: absolute;
    width: 7px;
    height: 7px;
    top: 0px;
    right: 0px;
    background: url(../img/TR.png) no-repeat 0 0;
}

.BR {
    position: absolute;
    width: 7px;
    height: 7px;
    bottom: 0px;
    right: 0px;
    background: url(../img/BR.png) no-repeat 0 0;
}

.BL {
    position: absolute;
    width: 7px;
    height: 7px;
    bottom: 0px;
    left: 0px;
    background: url(../img/BL.png) no-repeat 0 0;
}

/**PRODUCT**/

section.product .item{
	width:100%;
	overflow: hidden;
    position: relative;
	margin:0 0 9rem 0;
}

section.product .item .item__inner__info,section.product .item .item__inner__img{

}

section.product .item .item__inner__img{
	position: relative;
	
}

section.product .item .item__inner__info{
}

section.product .item:nth-child(odd) .item__inner__info{
	float:right;
	text-align:right;
}

section.product .item:nth-child(odd) .item__inner__info .item__copy,
section.product .item:nth-child(odd) .item__inner__info a.view {
	right:0;
}

section.product .item:nth-child(odd) .item__inner__img{
	float:left;
}

section.product .item:nth-child(even) .item__inner__info{
	float:left;
	text-align:left;
}

section.product .item:nth-child(even) .item__inner__info .item__copy{
	left:0;
}

section.product .item:nth-child(even) .item__inner__img{
	float:right;
}


section.product .item__inner__info .title{
	font-family:'Bradley_Hand_ITC';
	font-size:5rem;
	font-style:oblique;
}

section.product .item__inner__info .sub_title{
	font-size:1rem;	
}

section.product .item__inner__info .item__copy{
	font-size:2.5rem;
    position: absolute;
    top: 40%;
    letter-spacing: 5px;	
}

section.product .item__inner__info .view__btn{
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
	border:1px solid #000;
	padding:1.25rem 5rem;	
    background: white;
    height: 100%;
    width: 100%;
}

section.product .item__inner__info .view__btn:hover{
	border:1px solid #eee;	
}

section.product .item__inner__info  a.view{
	position: absolute;
    bottom: 0;
	display:block;
}

.fa-angle-right{
    position: absolute;
    top: 1.15rem;
    right: 1rem;
    font-size: 1rem!important;
}


.btn--animated {
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    color: #000;
}

.btn--animated:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    z-index: -1;
}

.btn--animated:hover {
	color: white;
}

.btn--animated:hover:before {
	-webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/**NEWS**/

section.news{
	text-align:center;
}

section.news .column{
    width: 33.33%;
    margin: 0 0 3rem 0;
	text-align:left;
	vertical-align: top;
    float: left;		
}

section.news .column a{
    padding: 1.5rem;
    float: left;		
}

section.news .column:nth-child(3){
    margin-right: 0;	
}

section.news .column img{
	border:1px solid #efefef;
	width:100%;
}

section.news .column .day{
	margin:2.5rem 0 1.5rem;
}

section.news .column .text{
	font-weight:300;
	line-height: 2;
}


section.news .column img:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
/**NEWS**/

section.about{
	text-align:center;
}

section.about .produce{
	font-size:1.25rem;
	line-height:2;
	margin:0 0 12rem 0;
}

section.about .company{
	font-size:1rem;
	line-height:2;
	margin: 0 0 2rem;
}

section.about img{
	width:6rem;
	margin:1rem auto;
}

.sns a{
	display:inline-block;
	cursor: pointer;
}

.sns a:hover{
	opacity:0.7;
}

.sns a img{
    width: 5rem;
    padding: 0 0.5rem;
}


/**footer**/

.pagetop {
    position: fixed;
    bottom: 4rem;
    left: 50%;
    margin-left: -16px;
    cursor: pointer;
}

.pagetop .fa-angle-double-up{
	font-size:3rem;
}

footer{
	text-align:center;
	padding:0 0 1rem 0;
}

.sp_pagetop {
	display:none;
}

@media(max-width:768px){

a{
	font-size:1rem;
	}
	
h1 img {
    width:18rem;
    margin: 5rem auto;
}

.kv{
	background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
	height: 55vh;
	}	
	
.kv h2 img {
    position: absolute;
    top: 3rem;
    left: 50%;
    margin-left: -6rem;
    width: 12rem;
}
	
.kv .concept{
	top:14rem;
    margin-left: -7rem;
    width: 14rem;
}

.kv .concept h3{
	font-size:1.25rem;
	margin: 0 0 1rem 0;	
}

.kv .concept p{
	font-size: 0.75rem;

}	
	
nav a {

    margin: 1rem 0.25rem;
}	
	
h3{
	font-size:2rem;
	margin:2rem 0 4rem 0;
}
	
section {
    margin: 0 0 5rem;
    padding: 0 1rem;
}	
	
.wrapper {
    width: 100%;	
	}

section.news .column {
    width: 50%;
	}
	
section.product .item{
	width:100%;
	overflow: hidden;
    position: relative;
	margin:0 0 9rem 0;
}

section.product .item .item__inner__info,section.product .item .item__inner__img{
	width:50%;
}

section.product .item .item__inner__img img{
	width:100%;
	
}

section.product .item .item__inner__info{
}

section.product .item__inner__info .title {
    font-size: 2rem;
	}
	
section.product .item__inner__info .sub_title {
    font-size: 0.75rem;
}
	
section.product .item__inner__info .item__copy {
    font-size: 1.25rem;
	letter-spacing: 2px;
	}
	
section.product .item__inner__info a{
	font-size:0.75rem;
	font-weight:100;
	}	
	
section.product .item__inner__info .view__btn {
    padding: 0.5rem 2rem;		
}
	
.fa-angle-right {
    top: 0.35rem;
}
	
  section.about .produce {
    font-size: 0.75rem;
	}

	section.news .column a{
		font-size:0.75rem;
	}
	
	
footer {
    position:relative;
}	
	
.sp_pagetop {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    margin-left: -16px;
    cursor: pointer;
}
	
.sp_pagetop .fa-angle-double-up {
    font-size: 3rem;
}	

.pagetop{
		display: none;
	}
	
	
}