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

/*********************************************************************/
/* 共通 */
/*********************************************************************/
html {
    font-size: 100%;
	width: 100%;
 }
body {
    font-size: 13px;
    margin: 0;
    padding: 0;
    line-height: 1;
    word-wrap: break-word;
    color: #000;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    text-align: left;
    position: relative;
	width: 100%;
	min-width: 1280px;
	min-height: 100vh;
    /*-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100% !important;*/
    overflow-x: hidden;
}
img {
	margin: 0px;
	padding: 0px;
	border-style: none;
	width: 100%;
	height: auto;
}
a {
	color: #00a6e9;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
  color: #00a6e9;
  text-decoration: underline;
}
ul, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
p {
	margin: 0px;
	padding: 0px;
	line-height: 1.9;
}

.br_pc {display: block;}
.br_sp {display: none;}

/* コンテンツフェイド */
.list-fade {
    transition: .6s;
}
.list-fade {
    opacity: 0;
    transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
}
.fade {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/* コンテンツフェイド（移動なし） */
.list-fade0 {
    transition: .4s;
}
.list-fade0 {
    opacity: 0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}
.fade0 {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/* コンテンツフェイド（上から下） */
.slide-bottom {
	-webkit-animation: slide-bottom 0.3s ease-out 1.7s both;
	        animation: slide-bottom 0.3s ease-out 1.7s both;
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
      opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
      opacity: 1.0;
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
      opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
      opacity: 1.0;
  }
}


/* コンテンツフェイド（左から右） */
.list-fade-left {
    transition: .3s;
    transition-timing-function: ease-out;
}
.list-fade-left {
    opacity: 0;
    transform: translate(-100px, 0);
    -webkit-transform: translate(-100px, 0);
}
.fade-left {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/* コンテンツフェイド（右から左） */
.list-fade-right {
    transition: .3s;
    transition-timing-function: ease-out;
}
.list-fade-right {
    opacity: 0;
    transform: translate(60px, 0);
    -webkit-transform: translate(60px, 0);
}
.fade-right {
    opacity: 1.0;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/* 回転 */
.rotate-center {
	-webkit-animation: rotate-center 10s linear infinite both;
	        animation: rotate-center 10s linear infinite both;
}
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* 拡大 */
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ディレイ */
.deray1 {transition-delay: 0.25s;}
.deray2 {transition-delay: 0.5s;}
.deray3 {transition-delay: 0.75s;}
.deray4 {transition-delay: 1s;}
.deray5 {transition-delay: 1.25s;}
.deray6 {transition-delay: 1.5s;}
.deray7 {transition-delay: 1.75s;}
.deray8 {transition-delay: 2s;}
.deray9 {transition-delay: 2.25s;}
.deray10 {transition-delay: 2.5s;}

/*********************************************************************/
/* CONTENTS */
/*********************************************************************/
.content {
	width: 100vw;
	height: 100vh;
	position: relative;
}
.content .kv {
	width: 75vw;
	height: 82vh;
	position: absolute;
	background-image: url("../img/kv_pc.jpg");
	background-size: cover;
	background-position: center;
	top: 0;
	right: 0;
}
.content .in {
	width: 89vw;
    margin: 0 auto;
}
.content .in h1 {
	display: block;
	font-size: 1.75vw;
	font-weight: 600;
	position: absolute;
	top: 6.44vw;
}
.content .in .name {
	font-family: "Roboto", sans-serif;
	font-size: 6vw;
	font-weight: 600;
	position: absolute;
	top: 20vw;
}
.content .in .catch {
	font-family: "Roboto", sans-serif;
	font-size: 2.1vw;
	font-weight: 500;
	position: absolute;
	top: 26.8vw;
}
.content .menu {
	position: absolute;
    bottom: 0;
    width: 89vw;
    height: 100px;
    left: 5.5vw;
}
.content .menu .left {
	display: inline-block;
}
.content .menu .left ul {
	font-size: 0;
}
.content .menu .left ul li {
	display: inline-block;
	margin: 0 20px 0 0;
	vertical-align: middle;
}
.content .menu .left ul li.contact {
	width: 25px;
}
.content .menu .left ul li.x {
	width: 20px;
}
.content .menu .left ul li.insta {
	width: 20px;
}
.content .menu .right{
	font-size: 0;
	position: absolute;
	right: 0;
	display: inline-block;
}
.content .menu .right ul li {
	display: inline-block;
	margin: 0 0 0 48px;
	vertical-align: middle;
}
.content .menu .right ul li.store {
	width: 120px;
}
.content .menu .right ul li.notebook {
	width: 100px;
}


@media screen and (max-width: 599px) {
	body {
		min-width: 100%;
	}
	
	/*********************************************************************/
	/* CONTENTS */
	/*********************************************************************/
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.content .kv {
		width: 80vw;
		height: 74vh;
		position: absolute;
		background-image: url("../img/kv_sp.jpg");
		background-size: cover;
		background-position: center;
		top: 0;
		right: 0;
	}
	.content .in {
		width: 83.2vw;
		margin: 0 auto;
	}
	.content .in h1 {
		display: block;
		font-family: sans-serif;
		font-size: 5.33vw;
		font-weight: 700;
		position: absolute;
		top: 6vh;
	}
	.content .in .name {
		font-family: "Roboto", sans-serif;
		font-size: 13.3vw;
		font-weight: 600;
		position: absolute;
		top: 55vh;
	}
	.content .in .catch {
		font-family: "Roboto", sans-serif;
		font-size: 4.8vw;
		font-weight: 500;
		position: absolute;
		top: 64vh;
	}
	.content .menu {
		position: absolute;
		bottom: 10vh;
		width: 83.2vw;
		height: 80px;
		left: 8.4vw;
	}
	.content .menu .left {
		display: inline-block;
		padding: 4px 0 0 0;
	}
	.content .menu .left ul {
		font-size: 0;
	}
	.content .menu .left ul li {
		display: inline-block;
		margin: 0 20px 0 0;
		vertical-align: middle;
	}
	.content .menu .left ul li.contact {
		width: 5.6vw;
	}
	.content .menu .left ul li.x {
		width: 20px;
	}
	.content .menu .left ul li.insta {
		width: 20px;
	}
	.content .menu .right{
		font-size: 0;
		position: absolute;
		right: 0;
		display: inline-block;
	}
	.content .menu .right ul li {
		display: inline-block;
		margin: 0 0 0 24px;
		vertical-align: middle;
	}
	.content .menu .right ul li.store {
		width: 17vw;
	}
	.content .menu .right ul li.notebook {
		width: 14vw;
	}
}