@charset "utf-8";


html {-webkit-text-size-adjust:none}

* {
    margin: 0;
    padding: 0;
}
*:focus {
outline: none;
}

a {
outline: none;
border-style: none;
cursor: pointer;
}
a:active {
outline:none;
}
::selection { 
	color: #000;
	background-color: #ddd;
}
::-moz-selection { 
	color: #000;
	background-color: #ddd;
}

body {
	-webkit-font-smoothing: antialiased;
	color: #000;
	height: 100%;
	text-align: left;	
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","游ゴシック", "YuGothic",sans-serif;
	letter-spacing:0.05em;
	background: #fff;
	margin: 0;
	padding: 0;
    line-height: 1.8;
}
@font-face {
font-family: 'futura';
src: url(../fonts/futura.otf) format('opentype'),
    url(../fonts/futura.woff) format('woff');
}
h1,h2,h3,h4,h5,p,th {
	font-weight: normal;
	margin: 0;
}

a{
	text-decoration: none;
	color: #000;
    opacity: 1;
    transition: 0.4s;
    cursor: pointer!important;
}
a:hover{
	text-decoration: none;
    cursor: pointer!important;
    color: #000;
}
ul {
	margin:0;
	padding: 0;
    list-style: none;
}
.sp-only {
    display: none!important;
}
.pc-only {
    display: block;
}
	.pc-view {
	visibility: visible;
}
img {
    width: 100%;
	height: auto;
}


/* fadein */
.fadein,
.index-box.fadein,
.item-box.fadein,
.fadein.blur {
   opacity: 0;
   transition: all 0.4s 0s ease-out;
 }
.fadein.isshow,
.index-box.fadein.isshow,
.item-box.fadein.isshow,
.fadein.blur.isshow {
    opacity: 1;
}
.index-box.fadein:nth-of-type(2),
.item-box.fadein:nth-of-type(2) {
	transition-delay: 0.2s;
}
.index-box.fadein:nth-of-type(3),
.item-box.fadein:nth-of-type(3) {
	transition-delay: 0.4s;
}
.index-box.fadein:nth-of-type(5),
.item-box.fadein:nth-of-type(5) {
	transition-delay: 0.2s;
}
.index-box.fadein:nth-of-type(6),
.item-box.fadein:nth-of-type(6) {
	transition-delay: 0.4s;
}
.fadein.blur.isshow{
	opacity: 0;
    animation-name: blurAnime;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes blurAnime{
  from {
  filter: blur(30px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
.fadein-up {
    transform: translateY(30px);
    opacity: 0;
}
.inner-mid p.fadein-up:nth-of-type(2n) {
	transition-delay: 0.2s;
} 
.fadein-up.isshow {
    transform: translateY(0);
    transition: opacity 1200ms,transform 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: 100ms;
    opacity: 1;
}
.fade-view {
    display: block;
    transition: all 1.3s 0s ease-out;
    transition-delay: 1.5s;
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    opacity: 0;
}
.fade-view.isshow {
    opacity: 1;
}
.slick-slider {
	overflow: hidden;
}
.slick-slider div img {
  width: 100%;
}
.isshow span {
    opacity: 0;
    animation: 1.1s linear forwards Types;
}
.isshow span:first-child { animation-delay: 0s; }
.isshow span:nth-of-type(2) { animation-delay: 0.05s; }
.isshow span:nth-of-type(3) { animation-delay: 0.1s; }
.isshow span:nth-of-type(4) { animation-delay: 0.15s; }
.isshow span:nth-of-type(5) { animation-delay: 0.2s; }
.isshow span:nth-of-type(6) { animation-delay: 0.25s; }
.isshow span:nth-of-type(7) { animation-delay: 0.3s; }
.isshow span:nth-of-type(8) { animation-delay: 0.35s; }
.isshow span:nth-of-type(9) { animation-delay: 0.4s; }
.isshow span:nth-of-type(10) { animation-delay: 0.45s; }
.isshow span:nth-of-type(11) { animation-delay: 0.5s; }
.isshow span:nth-of-type(12) { animation-delay: 0.55s; }
.isshow span:nth-of-type(13) { animation-delay: 0.6s; }
.isshow span:nth-of-type(14) { animation-delay: 0.65s; }
.isshow span:nth-of-type(15) { animation-delay: 0.7s; }
.isshow span:nth-of-type(16) { animation-delay: 0.75s; }
.isshow span:nth-of-type(17) { animation-delay: 0.8s; }
.isshow span:nth-of-type(18) { animation-delay: 0.85s; }
.isshow span:nth-of-type(19) { animation-delay: 0.9s; }
.isshow span:nth-of-type(20) { animation-delay: 0.95s; }
.isshow span:nth-of-type(21) { animation-delay: 1s; }
.isshow span:nth-of-type(22) { animation-delay: 1.05s; }
.isshow span:nth-of-type(23) { animation-delay: 1.1s; }
@keyframes Types {
    to { opacity: 1; }
}


/* layout */
#top {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
.kv-logo {
	position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 15%;
    top: 0;
    right: 0;
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
}
.levis_tab {
	position: fixed;
	right: 0;
	top: 20%;
	width: 40px;
	opacity: 0;
	transition: 0.4s;
	z-index: 9999;
}
.levis_tab.fixed {
	opacity: 1;
}

.intro-ttl {
	text-align: center;
    margin: 150px auto 50px;
    font-size: 1.7em;
    font-weight: 600;
	letter-spacing: 0.1em;
}
.intro-tx {
	text-align: center;
    font-size: 1em;
    line-height: 2;
    letter-spacing: 0.1em;
    margin: 0 auto 150px;
	font-weight: 600;
}
.index-ttl {
	font-family: 'futura', sans-serif;
	font-size: 1.8em;
    text-align: center;
    margin: 0 auto 5px;
    color: #0b2d5d;
}
#index {
	background-color: #f5f2e9;
    display: flex;
    flex-wrap: wrap;
    padding: 100px 10%;
}
.index-box {
	width: 32%;
	margin-bottom: 2%;
	margin-right: 2%
}
.index-box a {
	display: flex;
	transition: 0.4s;
}
.index-box a:hover {
	opacity: 0.7;
}
.index-box:nth-of-type(3n) {
	margin-right: 0;
}
.image-area {
	margin: 150px 10%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.image-area .blur{
	width: 49%;
}
.content-box {
	margin: 0 10% 250px;
}
.content-title {
	align-items: baseline;
	display: flex;
    justify-content: space-between;
	font-family: 'futura', sans-serif;
	padding-bottom: 5px;
	border-bottom: solid 1px #000;
}
.title-left {
	font-size:	1.2em;
}
.title-right {
	font-size: 4em;
    line-height: 1;
    color: #0b2d5d;
}
.content-inner {
	margin: 80px 0;
	padding-bottom: 50px;
	border-bottom: solid 1px #000;
}
.inner-top {
	display: flex;
	justify-content: flex-end;
}
.top-left {
	width: 47%;
    margin-right: 2%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.top-right {
	width: 49%;
}
.name {
	font-family: 'futura', sans-serif;
    color: #0b2d5d;
    font-size: 3.5em;
	line-height: 1.3;
}
.name span {
	display: block;
	font-size: 0.35em;
	color: #000;
}
.spec {
	font-size: 1em;
	font-family: 'futura', sans-serif;
    margin: 50px auto 30px 0;
}
.ig {
	display: flex;
	align-items: center;
	font-family: 'futura', sans-serif;
	font-size: 0.9em;
}
.ig a img {
	width: 15px;
}
.ig a {
	display: flex;
	transition: 0.4s;
	opacity: 1;
	padding-right: 10px;
}
.ig a:hover {
	opacity: 0.7;
}
.question {
	font-size: 0.95em;
    font-weight: 600;
    padding-bottom: 5px;
}
.answear {
	font-size: 0.9em;
    padding-bottom: 20px;
    line-height: 2;
}
.answear:last-child {
	padding-bottom: 0;
}
.inner-mid {
	margin: 100px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.inner-mid p {
	width: 49%;
	display: flex;
	margin-bottom: 2%;
}
.inner-bottom {
	display: flex;
	justify-content: flex-end;
}
.bottom-left {
	width: 49%;
	font-family: 'futura', sans-serif;
	font-size: 0.88em;
}
.bottom-left a {
	border-bottom: solid 1px #000;
}
.bottom-right {
    width: 45%;
    margin: 0 2%;
}
.inner-foot {
    width: 45%;
    margin: 0 2%;
}
.foot-name {
	font-size: 1.7em;
	letter-spacing: 0.1em;
    font-weight: 600;
}
.foot-name span {
	display: block;
	font-size: 0.45em;
	font-weight: normal;
	letter-spacing: 0.05em;
}
.foot-spec {
	font-size: 0.8em;
	font-family: 'futura', sans-serif;
    margin-top: 30px;
}
#item-area {
	display: flex;
    flex-wrap: wrap;
    padding: 100px 10%;
    background-color: #f5f2e9;
}
.item-box {
	width: 32%;
	margin-right: 2%;
	position: relative;
	margin-bottom: 2%;
}
.item-box:nth-of-type(3n) {
	margin-right: 0;
}
.item-box > a {
	position: relative;
	z-index: 999;
}
.item-box-item {
	position: relative;
	visibility: visible!important;
}
.item-cap-musk {
    position: absolute;
    color: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    margin: auto;
    justify-content: center;
	transition: 0.4s;
}
.item-cap-musk a {
	z-index: 9999;
    color: #fff;
    align-items: center;
    display: flex;
	opacity: 0;
	transition: 0.4s;
}
.item-box:hover .item-cap-musk a {
	opacity: 1;
}
.item-cap {
	font-size: 1em;
	font-family: 'futura', sans-serif;
	line-height: 1.3;
	border-bottom: solid 1px #fff;
}
#footer {
	padding: 150px 0 30px;
    text-align: center;
}
.foot-logo {
	width: 15%;
    margin: 0 auto;
}
.staff {
	margin: 5% auto 10%;
    font-size: 0.88em;
    font-family: 'futura', sans-serif;
}
.copyright {
	font-family: 'futura', sans-serif;
    font-size: 0.65em;
}
@media screen and (max-width:820px) {
.intro-ttl {
	font-size: 1.5em;
}
.intro-tx {
	font-size: 0.9em;
}
.index-ttl {
	font-size: 1.5em;
}
.levis_tab {
	width: 30px;
	top: 18%;
}
.title-left {
	font-size: 0.9em;
}
.title-left {
	font-size: 3em;
}
.top-left {
	width: 48%;
	margin-right: 3%;
}
.name {
	font-size: 2em;
}
.name span {
	font-size: 0.5em;
}
.spec {
	font-size: 0.8em;
}
.ig {
	font-size: 0.75em;
}
.top-bottom {
	padding-top: 50px;
}
.question {
	font-size: 0.8em;
}
.answear {
	font-size: 0.7em;
}
.bottom-left {
	font-size: 0.75em;
}
.foot-name {
	font-size: 1.3em;
}
.foot-spec {
	font-size: 0.7em;
}
.item-cap {
	font-size: 0.8em;
}
.staff {
	font-size: 0.75em;
}
}
@media screen and (max-width:768px) {
   .sp-only {
    display: block!important;
}
    .pc-only {
    display: none!important;
}
	.pc-view {
	visibility: hidden;
}
	#top {
    position: relative;
    height: 90vh;
    width: 100%;
    overflow: hidden;
}
	.kv-logo {
	width: 25%;
	}
	.intro-tx {
    font-size: 0.7em;
	margin-bottom: 80px;
}
	.index-ttl {
    font-size: 1.3em;
}
	#index {
    padding: 25px 20px;
}
	.image-area {
    margin: 50px 25px;
}
	.content-box {
    margin: 0 25px 100px;
}
	.title-left {
    font-size: 0.8em;
}
	.title-right {
    font-size: 2.5em;
}
	.inner-top {
    display: block;
}
	.content-inner {
    margin: 50px 0;
    padding-bottom: 20px;
}
	.top-right {
    width: 75%;
    margin: 0 auto;
}
	.top-left {
    width: calc(100% - 40px);
    margin: 0 auto;
}
	.name {
    font-size: 2.3em;
    margin-top: 40px;
}
	.name span {
    font-size: 0.35em;
}
	.spec {
    font-size: 0.8em;
    line-height: 1.7;
    margin: 40px auto 30px 0;
}
	.inner-mid {
    margin: 80px 0 30px;
}
	.inner-mid p {
    width: 48.5%;
    margin-bottom: 3%;
}
	.inner-bottom {
    display: block;
	width: calc(100% - 40px);
    margin: 0 20px;
}
	.bottom-left {
    font-size: 0.7em;
	width: 100%;
	margin-bottom: 20px;
	line-height: 2;
}
    .bottom-right {
    width: 100%;
    margin: 0;
}
	.question {
    font-size: 0.75em;
}
	.answear {
    font-size: 0.7em;
	padding-top: 3px;
}
	.answear:last-child {
    padding-bottom: 20px;
}
	.inner-foot {
    width: 100%;
	margin: 60px 20px 0;
}
	.foot-name {
    font-size: 1.15em;
}
	.foot-name span {
    font-size: 0.4em;
}
	.foot-spec {
    font-size: 0.6em;
}
	#item-area {
    padding: 25px 20px;
}
	.item-box {
    width: 48.5%;
    margin-right: 3%;
    margin-bottom: 1%;
}
	.item-box-item.sp-only {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
	.item-box-item.sp-only img {
	display: block;
	position: absolute;
	opacity: 0;
	animation: slideAnime 8s ease infinite;
}
.item-box-item.sp-only img:nth-of-type(1) { animation-delay: 0s }
.item-box-item.sp-only img:nth-of-type(2) { animation-delay: 4s }

@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  48% { opacity: 1 }
  50% { opacity: 0 }
 100% { opacity: 0 }
}
	.item-box:nth-of-type(3n) {
	margin-right: 3%;
}
	.item-box:nth-of-type(2n) {
	margin-right: 0;
}
	.item-box-item:before {
	content: "+";
	color: #fff;
	position: absolute;
    bottom: 10px;
    left: 8px;
	display: block;
    font-size: 0.6em;
	z-index: 999;
}
	.item-cap {
    font-size: 0.65em;
}
	#footer {
    padding: 80px 0 30px;
}
	.foot-logo {
    width: 40%;
}
	.staff {
    font-size: 0.65em;
}
	.copyright {
    font-size: 0.5em;
}

	.item-cap-musk a.sp-only {
	display: flex;
}
	.item-cap-musk a.sp-top {
	align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}
 
}
@media screen and (max-width:540px) {
	.slick-slide {
	height: 100vh;
}
	.kv-logo {
	width:40%;
}
	.intro-ttl {
    font-size: 1.25em;
    margin: 80px auto 30px;
    line-height: 1.6;
}

}