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

/* ----- 背景用の動画ファイル ----- */

/* =========================
  背景動画（transformなし）
========================= */
.bg-movie {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-movie video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← これがないと余白が出る */
  display: block;    /* ← video下の謎余白対策 */
}

.bg-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('../images/dotblue.png') repeat;
}


.topsquare {
	position: absolute;
	margin: 0;
  padding: 0;
	left: 50%;
    top: 50%;
}
.topsquare img {
	display: block;
	width: 1000px;
	max-width: 160%;
	transform: translate(-50%,-50%);
}

/* images
---------------------------------------------------- */

.bg-image {
	width: 100%;
	height: 100vh;
	background-position:center;
	background-size: cover;
	background-repeat: no-repeat;
}
.toptexttitle {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	color:#fff;
	transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.toptitle {
	font-size: 5.6em;
	line-height: 1em;
}
.toptitlecompany img {
	width: 600px;
	padding-bottom: 20px;
}
.red {
	border:1px solid red;
	width: 80%;
}
.wayaku {
	font-size: 2em;
	padding-bottom: 30px;
}
.text01 {
	font-size: 1.2em;
	line-height: 1.4em;
	color: yellow;
	font-weight: 600;
	padding-bottom: 10px;
}
text02 {
	font-size: 0.6em;
	line-height: 0.6em;
	text-align: center;
}
.contactbg-image {
	background-image: url('../images/companyimage.jpg');
	max-width: 100%;
	height: 600px;
	background-position:center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* importsaleslogos
---------------------------------------------------- */

.bg-makerlogo {
	text-align: center;
}
.bg-makerlogo img {
	margin: 0 auto;
	padding: 20px;
}

/*========= レイアウトのためのCSS ===============*/
header {
	margin: 0;
	height: 100vh;
}
#import {
	margin: 0;
	height: auto;
	border-bottom: 1px solid #aaa;
}

.topflex {
	position: absolute;
	width: 85%;
	display: flex;
	top: 50px;
	left: 5%;
	margin: 0 auto;
}

.toplogo {
	flex-basis: 30%;
}
.toplogo img {
	width: 280px;
}
.topmenu {
	flex-basis: 70%;
}
.topmenuflex {
	display: flex;
	justify-content: flex-end;
	color: #fff;
}
.topmenuflex-item {
	padding: 0 12px;
}

/* =========================
  SNS 共通
========================= */
.sns-fixed {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 9999;
  pointer-events: none; /* 誤タップ防止 */
}

.sns-fixed .sns {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  width: 190px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 8px 0 0 8px;
  color: #fff;
  text-decoration: none;
  transform: translateX(140px);
  transition: transform 0.3s ease;
}

.sns-fixed .sns:hover {
  transform: translateX(0);
}

/* アイコン */
.sns-fixed .sns i {
  width: 50px;
  min-width: 50px;
  text-align: center;
  font-size: 22px;
}

/* テキスト */
.sns-fixed .sns span {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* SNSカラー */
.youtube { background: #FF0000; }
.tiktok { background: #000; }
.instagram { background: #E1306C; }


@media screen and (max-width: 1200px) {
	.red {
		width: 100%;
	}
	.contactbg-image {
		height: 320px;
		background-position: 20%;
	}
}

@media screen and (max-width: 768px) {
	header {
	height: auto;
  min-height: 0;
}
	header,
    header:before{
		height: 100vh;    
    }
	.bg-movie {
    height:80svh;
  }
	.toptexttitle {
		width: 92%;
	}
	.toptitle {
		font-size: 4em;
		line-height: 1.1em;
	}
	.toptitlecompany img {
		width: 300px;
		padding-bottom: 10px;
	}
	.red {
		width: 100%;
	}
	.wayaku {
		font-size: 1.2em;
	}
	.text01 {
		font-size: 1em;
		text-align: left;
	}
	.text02 {
		font-size: 1em;
		text-align: left;
	}
	.contactbg-image {
		height: 260px;
		background-position:15%;
	}
	
}
/* =========================
  スマホ共通
========================= */
@media (max-width: 768px) {

  .sns-fixed {
	  pointer-events: auto;
    top: auto;
    bottom: 20px;
    right: 10px;
  }

  .sns-fixed .sns {
    width: 50px;
    height: 50px;
    transform: none !important;
  }

  .sns-fixed .sns span {
    display: none;
  }
}

/* =========================
  古いiPhone（absolute版）
========================= */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {

    .sns-absolute {
      position: absolute;
      right: 16px;
      bottom: 24px;
      z-index: 10;
    }

  }
}

/* =========================
  iOS タップ誤爆防止
========================= */
@media (hover: none) and (pointer: coarse) {
  .sns-fixed .sns {
    transition: none !important;
  }

  .sns-fixed .sns:hover {
    transform: none !important;
  }
}