@charset "UTF-8";
/*CSSサイトマップ
.........................
# 共通設定
  ┣ スマホのとき、PCのとき表示非表示
  ┣ 基本のフォント設定
  ┣ リンク・リストスタイル
  ┣ font
  ┗ アンカーリンク のズレ解消
.........................
# header
  ┣ header
  ┣ scroll
  ┣ Toggle Button
  ┣ scroll reset
  ┣ 開いてないときは画面外に配置
  ┗ nav-toggle 切り替えアニメーション

.........................
# main
  ┣ parallax
  ┣ product_list
  ┣ about
  ┣ usecase
  ┗ news

.........................
# TOPへ戻るボタン

.........................
# アニメーション
  ┣ アイコンのアニメーション
  ┗ resd moreのアニメーション

# コンテンツに動きをつける
  ┣ 基本
  ┣ ふわっと
  ┣ 左から
  ┣ 右から
  ┣ 下から
  ┣ 上から
  ┣ だんだん大きく
  ┣ だんだん小さく
  ┣ 左回り
  ┣ 右回り
  ┗ フッター
.........................*/
/* ========= 共通設定 ========= */
.pc-only {
		display: block !important;
}

.sp-only {
		display: none !important;
}

@media (max-width: 768px) {
		.pc-only {
				display: none !important;
		}
		.sp-only {
				display: block !important;
		}
}

body {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2;
		font-weight: 300;
		margin-bottom: 0 !important;
}

/* 画像の処理
img{
    vertical-align: top;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
}*/
li {
		list-style: none;
}

h1 {
		font-size: 25px;
		font-size: 2.5rem;
		line-height: 1.3;
		margin-bottom: 1rem;
}

@media (max-width: 991px) {
		h1 {
				font-size: 20px;
				font-size: 2rem;
		}
}

@media (max-width: 768px) {
		h1 {
				font-size: 18px;
				font-size: 1.8rem;
		}
}

@media (max-width: 640px) {
		h1 {
				font-size: 16px;
				font-size: 1.6rem;
		}
}

h2 {
		font-size: 24px;
		font-size: 2.4rem;
		line-height: 1.3;
}

@media (max-width: 991px) {
		h2 {
				font-size: 18px;
				font-size: 1.8rem;
		}
}

h3 {
		font-size: 20px;
		font-size: 2rem;
		line-height: 1.3;
}

@media (max-width: 991px) {
		h3 {
				font-size: 16px;
				font-size: 1.6rem;
		}
}

a {
		color: #333;
		text-decoration: none;
		display: inline-block;
		transition: all .3s ease-in-out;
}

a:hover {
		opacity: .8;
		color: #333;
		transform: translateY(-2px);
}

a:visited {
		color: #333;
}

#items, #access, #usecase {
		padding-top: 80px;
		margin-top: -80px;
}

/* ========= header ========= */
.inner {
		width: 1200px;
		margin: 0 auto;
}

.inner:after {
		content: "";
		clear: both;
		display: block;
}

@media (max-width: 1200px) {
		.inner {
				width: 100%;
				padding: 0 15px;
		}
}

#top-head {
		position: fixed;
		width: 100%;
		background-color: #fff;
		margin: auto;
		padding: 10px 0;
		line-height: 1;
		z-index: 999;
		text-decoration: none;
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		color: #333;
		text-decoration: none;
}

#top-head a {
		color: #333;
		text-decoration: none;
		position: relative;
}

#top-head a:after {
		position: absolute;
		bottom: -3px;
		left: 0;
		content: '';
		width: 100%;
		height: 10px;
		background: #ffcc33;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .3s;
		z-index: -1;
}

#top-head a:hover::after {
		transform: scale(1, 1);
}

@media (max-width: 768px) {
		#top-head a {
				font-size: 2rem;
		}
}

#top-head .inner {
		position: relative;
}

#top-head .logo {
		float: left;
		font-size: 36px;
		margin: 0;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
}

#global-nav ul {
		list-style: none;
		position: absolute;
		right: 0;
		top: 0;
}

#global-nav ul li {
		float: left;
		padding: 0 25px;
}

#global-nav ul li:last-child {
		padding-right: 0;
}

@media (max-width: 1200px) {
		#global-nav ul li:last-child {
				padding-right: 15px;
		}
}

#global-nav ul li a {
		padding: 14px 5px;
		font-size: 18px;
		font-size: 1.8rem;
}

#top-head.scrollUp {
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#top-head.scrollUp .logo {
		font-size: 24px;
		color: #333;
}

#top-head.scrollUp #global-nav ul li a {
		color: #333;
		padding: 7px 20px;
}

@media (max-width: 768px) {
		#top-head.scrollUp #global-nav ul li a {
				color: #fff;
		}
}

#nav-toggle {
		display: none;
		position: absolute;
		right: 12px;
		top: 14px;
		width: 34px;
		height: 36px;
		cursor: pointer;
		z-index: 101;
}

#nav-toggle div {
		position: relative;
}

#nav-toggle span {
		display: block;
		position: absolute;
		height: 1px;
		width: 100%;
		background: #666;
		left: 0;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
		top: 0;
}

#nav-toggle span:nth-child(2) {
		top: 11px;
}

#nav-toggle span:nth-child(3) {
		top: 22px;
}

@media screen and (max-width: 768px) {
		#top-head, .inner {
				width: 100%;
				padding: 0;
		}
		#top-head {
				top: 0;
				position: fixed;
				margin-top: 0;
		}
		#top-head.fixed {
				padding-top: 0;
				background: transparent;
		}
		/* scroll reset */
		#mobile-head {
				width: 100%;
				height: 56px;
				z-index: 999;
				position: relative;
		}
		#top-head.fixed .logo, #top-head .logo {
				position: absolute;
				left: 13px;
				top: 13px;
				color: #333;
				font-size: 26px;
		}
		#global-nav {
				position: absolute;
				top: -500px;
				background: #333;
				width: 100%;
				text-align: center;
				padding: 10px 0;
				-webkit-transition: .5s ease-in-out;
				-moz-transition: .5s ease-in-out;
				transition: .5s ease-in-out;
		}
		#global-nav ul {
				list-style: none;
				position: static;
				right: 0;
				bottom: 0;
				font-size: 14px;
		}
		#global-nav ul li {
				float: none;
				position: static;
		}
		#top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a {
				width: 100%;
				display: block;
				color: #fff;
				padding: 18px 0;
		}
		#nav-toggle {
				display: block;
		}
		.open #nav-toggle span:nth-child(1) {
				top: 11px;
				-webkit-transform: rotate(315deg);
				-moz-transform: rotate(315deg);
				transform: rotate(315deg);
		}
		.open #nav-toggle span:nth-child(2) {
				width: 0;
				left: 50%;
		}
		.open #nav-toggle span:nth-child(3) {
				top: 11px;
				-webkit-transform: rotate(-315deg);
				-moz-transform: rotate(-315deg);
				transform: rotate(-315deg);
		}
		.open #global-nav {
				-moz-transform: translateY(556px);
				-webkit-transform: translateY(556px);
				transform: translateY(556px);
		}
}

/* ========= main ========= */
.site_main {
		overflow: hidden;
		padding-top: 130px;
}

.site_main#top {
		padding-top: 0;
}

.site_main .parallax-window {
		height: 100vh;
		background: transparent;
}

.site_main .parallax-slider {
		top: 0;
		left: 0;
}

.site_main .top-txtarea {
		width: 100%;
		padding: 0 10%;
		color: #fff;
		position: absolute;
		top: 40%;
		z-index: 3;
}

@media (max-width: 480px) {
		.site_main .top-txtarea {
				padding: 0 5%;
				top: 30%;
		}
}

.site_main .top-txtarea h1 {
		font-size: 50px;
		font-size: 5rem;
		text-shadow: 2px 2px #333;
		line-height: 1.6;
  text-align: left
}

@media (max-width: 991px) {
		.site_main .top-txtarea h1 {
				font-size: 40px;
				font-size: 4rem;
		}
}

@media (max-width: 768px) {
		.site_main .top-txtarea h1 {
				font-size: 30px;
				font-size: 3rem;
          text-align: center
		}
}

@media (max-width: 480px) {
		.site_main .top-txtarea h1 {
				font-size: 25px;
				font-size: 2.5rem;
				line-height: 2;
		}
}

.site_main .product {
		width: 80%;
		margin: 0 auto;
		padding: 100px 0 50px;
}

@media (max-width: 768px) {
		.site_main .product {
				width: 90%;
		}
}

@media (max-width: 480px) {
		.site_main .product {
				width: 95%;
		}
}

.site_main .product .product_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}

.site_main .product .product_list .product_item {
		width: 23%;
		margin-bottom: 60px;
}

@media (max-width: 1200px) {
		.site_main .product .product_list .product_item {
				width: 31%;
		}
}

@media (max-width: 991px) {
		.site_main .product .product_list .product_item {
				width: 48%;
		}
}

@media (max-width: 640px) {
		.site_main .product .product_list .product_item {
				width: 100%;
		}
}

.site_main .product .product_list .product_item a {
		color: #333;
		display: block;
}

.site_main .product .product_list .product_item a .img {
		position: relative;
		width: 100%;
		overflow: hidden;
}

.site_main .product .product_list .product_item a .product_item_txt {
		margin-top: 10px;
}

.site_main .product .product_list .product_item a .product_item_price {
		font-size: 1.2rem;
		margin-top: 10px;
		color: #666;
}

.site_main .product .product_btn {
		text-align: center;
}

.site_main .product .product_btn a {
		display: block;
		color: #333;
		background-color: #fbfbfb;
		padding: 20px;
		box-shadow: 1px 1px 2px #ddd;
}

.site_main .product .product_btn a:hover {
		background-color: #f3f3f3;
}

.site_main .about {
		width: 80%;
		margin: 60px auto;
		display: flex;
		justify-content: space-between;
}

@media (max-width: 768px) {
		.site_main .about {
				display: block;
				width: 90%;
		}
}

@media (max-width: 480px) {
		.site_main .about {
				width: 95%;
		}
}

.site_main .about .about_txtbox {
		width: 45%;
}

@media (max-width: 768px) {
		.site_main .about .about_txtbox {
				width: 100%;
		}
}

.site_main .about .about_txtbox .about_txtbox_tit {
		margin-bottom: 20px;
		font-weight: 300;
		font-size: 24px;
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.3;
}

@media (max-width: 991px) {
		.site_main .about .about_txtbox .about_txtbox_tit {
				font-size: 18px;
				font-size: 1.8rem;
		}
}

.site_main .about .about_txtbox .about_txtbox_txt {
		margin-bottom: 40px;
		margin-left: 20px;
}

.site_main .about .about_txtbox .about_txtbox_ad {
		margin-left: 20px;
}

.site_main .about .about_txtbox .about_txtbox_ad .about_txtbox_aditem {
		margin-bottom: 8px;
}

.site_main .about .about_txtbox_img {
		width: 45%;
}

@media (max-width: 768px) {
		.site_main .about .about_txtbox_img {
				width: 100%;
		}
}

.site_main .usecase {
		border-top: #eee 1px solid;
}

.site_main .usecase .section_inner {
		width: 80%;
		margin: 60px auto;
		position: relative;
}

@media (max-width: 768px) {
		.site_main .usecase .section_inner {
				display: block;
				width: 90%;
		}
}

@media (max-width: 480px) {
		.site_main .usecase .section_inner {
				width: 95%;
		}
}

.site_main .usecase .section_inner .more {
		position: absolute;
		right: 15px;
		top: 80px;
}

.site_main .usecase .section_inner .more:after {
		content: '';
		position: absolute;
		top: 33%;
		right: -12px;
		width: 10px;
		height: 10px;
		border-left: 1px solid #333;
		border-bottom: 1px solid #333;
		-webkit-transform: rotate(-135deg);
		transform: rotate(-135deg);
		-webkit-animation: sdb 2s infinite;
		animation: sdb 2s infinite;
		opacity: 0;
		box-sizing: border-box;
}

.site_main .usecase .section_inner .more:hover {
		opacity: .8;
		transform: translateY(-2px);
}

.site_main .usecase .section_inner .usecase_box_inner {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}

.site_main .usecase .section_inner .usecase_box_inner .usecase_box {
		width: 45%;
		margin-bottom: 60px;
}

@media (max-width: 640px) {
		.site_main .usecase .section_inner .usecase_box_inner .usecase_box {
				width: 100%;
		}
}

.site_main .usecase .section_inner .usecase_box_inner .usecase_box a {
		color: #333;
		display: block;
}

.site_main .usecase .section_inner .usecase_box_inner .usecase_box a img {
		position: relative;
		width: 100%;
		height: 400px;
		overflow: hidden;
		margin: 0 auto;
		object-fit: cover;
		font-family: 'object-fit: cover;';
}

@media (max-width: 991px) {
		.site_main .usecase .section_inner .usecase_box_inner .usecase_box a img {
				height: 300px;
		}
}

@media (max-width: 768px) {
		.site_main .usecase .section_inner .usecase_box_inner .usecase_box a img {
				height: 250px;
		}
}

.site_main .usecase .section_inner .usecase_box_inner .usecase_box a h3 {
		margin-bottom: 10px;
}

.site_main .usecase .section_inner .usecase_box_inner .usecase_box a p {
		margin-top: 10px;
}

.site_main .news {
		border-top: #eee 1px solid;
		border-bottom: #eee 1px solid;
}

.site_main .news .news_inner {
		width: 80%;
		margin: 60px auto;
}

@media (max-width: 768px) {
		.site_main .news .news_inner {
				width: 90%;
		}
}

@media (max-width: 480px) {
		.site_main .news .news_inner {
				width: 95%;
		}
}

.site_main .news .news_inner .news_tit {
		margin-bottom: 30px;
		font-weight: 700;
}

.site_main .news .news_inner .news_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}

.site_main .news .news_inner .news_list .news_item {
		width: 48%;
		border-top: dotted 1px #ccc;
}

.site_main .news .news_inner .news_list .news_item:nth-child(-n+2) {
		border-top: none;
}

@media (max-width: 480px) {
		.site_main .news .news_inner .news_list .news_item {
				width: 100%;
				margin-bottom: 20px;
		}
		.site_main .news .news_inner .news_list .news_item:nth-child(-n+2) {
				border-top: dotted 1px #ccc;
		}
		.site_main .news .news_inner .news_list .news_item:first-child {
				border-top: none;
		}
}

.site_main .news .news_inner .news_list .news_item .news_cat {
		display: inline-block;
		margin-top: 10px;
		color: #666;
		margin-right: 20px;
}

.site_main .news .news_inner .news_list .news_item time {
		display: inline-block;
}

.site_main .news .news_inner .news_list .news_item .news_tit {
		margin: 0 0 10px;
}

/* ========= footer ========= */
.site_footer {
		background-color: #fbfbfb;
}

.site_footer .site_footer_inner {
		width: 80%;
		margin: 0 auto;
		padding: 60px 0 20px;
}

@media (max-width: 768px) {
		.site_footer .site_footer_inner {
				width: 90%;
		}
}

@media (max-width: 480px) {
		.site_footer .site_footer_inner {
				width: 95%;
		}
}

.site_footer .site_footer_inner .footer_nav_list {
		display: flex;
		justify-content: space-between;
}

@media (max-width: 768px) {
		.site_footer .site_footer_inner .footer_nav_list {
				flex-wrap: wrap;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit {
		width: 35%;
}

@media (max-width: 1200px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit {
				width: 30%;
		}
}

@media (max-width: 991px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit {
				width: 25%;
		}
}

@media (max-width: 768px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit {
				width: 100%;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit .footer_tit {
		font-size: 2.6rem;
}

@media (max-width: 400px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item-tit .footer_tit {
				font-size: 2.0rem;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item {
		width: 20%;
}

@media (max-width: 1200px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item {
				width: 22%;
		}
}

@media (max-width: 991px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item {
				width: 25%;
		}
}

@media (max-width: 768px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item {
				width: 33%;
		}
}

@media (max-width: 580px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item {
				width: 100%;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item .nav_list .nav_item {
		margin-bottom: 10px;
}

@media (max-width: 580px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item .nav_list .nav_item {
				border-bottom: dotted 1px #acacac;
				margin-bottom: 0;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item .nav_list .nav_item a {
		color: #333;
}

@media (max-width: 580px) {
		.site_footer .site_footer_inner .footer_nav_list .footer_nav_item .nav_list .nav_item a {
				padding: 15px 0;
				font-size: 18px;
				font-size: 1.8rem;
				display: block;
		}
}

.site_footer .site_footer_inner .footer_nav_list .footer_nav_item .nav_list .nav_item a p {
		color: #acacac;
		display: block;
		line-height: 1;
}

.site_footer .site_footer_inner .copyright {
		text-align: center;
		margin: 50px 0 30px;
}

/* .............................................................

# TOPへ戻るボタン

............................................................. */
#page-top {
		display: none;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1000;
}

#page-top.topON {
		display: block;
}

#page-top a {
		color: #fff;
		width: 100px;
		padding: 20px 0;
		text-align: center;
		display: block;
		border-radius: 3px;
		transition: all .3s ease;
}

#page-top a::before {
		content: "";
		bottom: 0;
		right: 0;
		border-top: 7em solid transparent;
		border-right: 7em solid #949494;
		opacity: .9;
		position: absolute;
		z-index: 100;
		transition: all .3s ease;
}

#page-top a::after {
		content: "TOP";
		display: block;
		bottom: 10px;
		color: #fff;
		font-weight: bold;
		right: 10px;
		position: absolute;
		z-index: 101;
		transition: all .3s ease;
		animation: vertical-out 0.3s ease-in-out;
}

#page-top a:hover::before {
		opacity: 1;
}

#page-top a:hover::after {
		content: "↑UP";
		animation: vertical 0.05s ease-in-out infinite alternate;
}

/* .............................................................

# アイコンのアニメーション

............................................................. */
@keyframes vertical {
		0% {
				transform: translateY(0px);
		}
		100% {
				transform: translateY(-2px);
		}
}

@keyframes vertical-out {
		0% {
				transform: translateY(-2px);
		}
		100% {
				transform: translateY(0px);
		}
}

/* .............................................................

# resd moreのアニメーション

............................................................. */
@-webkit-keyframes sdb {
		0% {
				opacity: 0;
		}
		50% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}

@keyframes sdb {
		0% {
				opacity: 0;
		}
		50% {
				opacity: 1;
		}
		100% {
				opacity: 0;
		}
}

.lum-lightbox-inner img {
		max-width: 100% !important;
		max-height: 100% !important;
}

/* .............................................................

# base setting｜move コンテンツに動きをつける

............................................................. */
.sa {
		opacity: 0;
		transition: all .5s ease;
}

.sa.show {
		opacity: 1;
		transform: none;
}

.sa--ct {
		transform: translate(0, 0);
}

.sa--lr {
		transform: translate(-100px, 0);
}

.sa--rl {
		transform: translate(100px, 0);
}

.sa--up {
		transform: translate(0, 50px);
}

.sa--down {
		transform: translate(0, -100px);
}

.sa--scaleUp {
		transform: scale(0.5);
}

.sa--scaleDown {
		transform: scale(1.5);
}

.sa--rotateL {
		transform: rotate(180deg);
}

.sa--rotateR {
		transform: rotate(-180deg);
}

.sa--upfooter {
		transform: translate(0, 20px);
}

img.parallax-slider {
  position: static !important
}