@charset "UTF-8";


/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#DBD2C2;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:60px;
}



#header {
	position: fixed;
	width: 100%;
	z-index: 100;
}
#header.DownMove{
	background:rgba(255,255,255,0.5);
}


	#header h1 {
		margin: 20px;
		width: 80px;
		float: left;
	}
		#header h1 img {
			width: 100%;
			height: auto;
		}
	#header nav {
		width: 75%;
		float: right;
		text-align: right;
	}



	#header ul {
		display: flex;
		justify-content: flex-end;
		padding-top: 38px;
		margin-right: 120px;
	}
	#header ul li {
		display: inline;
		margin-left: 20px;
	}
		#header ul li a {
			
			display: block;
			position: relative;
			
			font-weight: 700;
			text-align: right;
			color: #000;
		}

	#header ul li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 1px;
    background:#FFF;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
#header ul li.current a::after,
#header ul li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}




	#header .con {
		width: 66px;
		position: absolute;
		top: 20px;
		right: 20px;
	}








#Main {
	background: url("../img/aerosol/bg.png") repeat;
	padding: 200px 0;
	font-size: 2rem;
}
#Main .inner {
	width: 1100px;
}
#Main .ad {
	transition: all .3s;
}
#Main .ad:hover {
	transform: translate(0px,-8px);
}



#Main img {
	width: 100%;
	height: auto;
}

	#Main #titleArea {
		border-top: solid 1px #000000;
		padding-top: 20px;
		margin-bottom: 40px;
	}
	#Main #titleArea .right {
		float: right;
		width: 216px;
	}
		#Main #titleArea .right p {
			margin-top: 10px;
		}
	#Main #titleArea .left {
		float: left;
		width: 856px;
	}
		#Main #titleArea .left .cell01 {
			margin-bottom: 40px;
			padding-bottom: 40px;
			border-bottom: solid 1px #000000;
		}
			#Main #titleArea .left .cell01 .pht {
				width: 218px;
				float: right;
			}
			#Main #titleArea .left .cell01 dl {
				width: 617px;
				float: left;
				font-family: 'Noto Serif JP', sans-serif;
			}
			#Main #titleArea .left .cell01 dl dt {
				margin-bottom: 30px;
			}


		#Main #titleArea .left .cell02 {
			margin-bottom: 40px;
			padding-bottom: 40px;
			border-bottom: solid 1px #000000;
		}
			#Main #titleArea .left .cell02 .pht {
				width: 376px;
				float: right;
			}
			#Main #titleArea .left .cell02 dl {
				width: 455px;
				float: left;
				font-family: 'Noto Serif JP', sans-serif;
			}
			#Main #titleArea .left .cell02 dl dt {
				margin-bottom: 30px;
			}


		#Main #titleArea .left .cell03 {
			margin-bottom: 40px;
		}
			#Main #titleArea .left .cell03 .pht {
				width: 390px;
				float: left;
			}
			#Main #titleArea .left .cell03 dl {
				width: 438px;
				float: right;
				font-family: 'Noto Serif JP', sans-serif;
			}
			#Main #titleArea .left .cell03 dl dt {
				margin-bottom: 30px;
			}

		#Main #titleArea .menu {
			margin-top: 10px;
			border: solid 2px #000;
		}
			#Main #titleArea .menu a {
				transition: all .3s;
			}
			#Main #titleArea .menu a:hover {
				display: block;
				background: #FFF;
			}
			#Main #titleArea .menu dl {
			}
			#Main #titleArea .menu dl dt {
				text-align: center;
				background: #000;
				color: #FFF;
				font-weight: 900;
				font-size: 1.6rem;
			}
				#Main #titleArea .menu dl dd {
					padding: 5px 15px;
					font-size: 1.4rem;
				}







#Main #speed {
	border-top: solid 1px #000000;
	margin-bottom: 40px;
	padding-top: 40px;
}
	#Main #speed .right {
		width: 790px;
		float: right;
		font-family: 'Noto Serif JP', sans-serif;
	}
		#Main #speed .right dl {
			padding: 20px 40px 30px 40px;
		}
		#Main #speed .right dl dt {
			margin-bottom: 30px;
		}

		#Main #speed .right li {
			width: 100px;
			float: left;
			display: inline;
		}
		#Main #speed .right li:first-child {
			width: 296px;
			float: left;
		}
		#Main #speed .right li:last-child {
			width: 486px;
			float: right;
		}



	#Main #speed .left {
		width: 296px;
		float: left;
	}
	#Main #speed .left li {
		margin-bottom: 10px;
	}


#Main #brand {
	border-top: solid 1px #000000;
	padding-top: 40px;
	margin-bottom: 40px;
}
	#Main #brand h3 {
		margin-bottom: 30px;
	}

	#Main #brand .left {
		float: left;
		width: 551px;
		border-right: dotted 3px #000;
		padding-right: 65px;
	}
	#Main #brand .right {
		float: right;
		width: 486px;
	}

	#Main #brand h4 {
		font-weight: 900;
		font-size: 2rem;
		text-align: center;
		margin-bottom: 20px;
	}
	#Main #brand dt  {
		margin-bottom: 20px;
	}
	#Main #brand dd  {
		font-family: 'Noto Serif JP', sans-serif;
	}


	#Main #brand video  {
		width: 100%;
	}
	#Main #brand img  {
		width: 100%;
		height: auto;
	}



#Main #story {
	border-top: solid 1px #000000;
	padding-top: 40px;
	margin-bottom: 40px;
}
	#Main #story h3 {
		margin-bottom: 30px;
	}
	#Main #story .cell01 {
		border-bottom: dotted 1px #000000;
		padding-bottom: 20px;
		margin-bottom: 20px;
		font-family: 'Noto Serif JP', sans-serif;
	}
	#Main #story .cell01 .left {
		float: left;
		width: 218px;
	}
	#Main #story .cell01 .right {
		float: right;
		width: 856px;
	}
	#Main #story .cell01 .right p {
		margin-bottom: 20px;
	}
		#Main #story .cell01 .right p img {
			width: auto;
			height: 287px;
			margin: 0 0 0 5px;
		}
	#Main #story .cell02 {
	}
	#Main #story .cell02 .left {
		float: left;
		width: 856px;
	}
	#Main #story .cell02 .right {
		float: right;
		width: 218px;
	}
	#Main #story .cell02 .left p {
		margin-bottom: 20px;
	}
		#Main #story .cell02 .left p img {
			width: auto;
			height: 287px;
			margin: 0 0 0 5px;
		}



#Main #product {
	margin-bottom: 40px;
}
	#Main #product h3 {
		text-align: center;
		font-size: 4rem;
		font-weight: 700;
		margin-bottom: 40px;
		
		align-items: center; /* 横線を上下中央 */
		display: flex; /* 文字と横線を横並び */
	}
	#Main #product h3::before,
	#Main #product h3::after {
		background-color: #000; /* 横線の色 */
		content: "";
		flex-grow: 1; /* 横幅いっぱい */
		height: 4px; /* 横線の高さ */
	}
	#Main #product h3::before {
		margin-right: 30px; /* 文字との余白 */
	}
	#Main #product h3::after {
		margin-left: 30px; /* 文字との余白 */
	}







	#Main #product .box {
		width: 340px;
		margin-right: 40px;
		border: solid 1px #000;
		padding: 10px;
		font-size: 1.6rem;
	}
		#Main #product .box:last-child {
			margin-right: 0px;
		}
	#Main #product .box h4 {
		text-align: center;
		margin-top: 10px;
	}
	#Main #product .box ul {
		background: #DDDBDB;
		text-align: center;
		margin: 10px 0;
	}
		#Main #product .box ul li {
			display: inline;
			margin: 0 10px;
		}
	#Main #product .box .size {
		margin-top: 20px;
	}
	#Main #product .box .link {
		margin-top: 40px;
		text-align: right;
	}


	#Main #product .more {
		background: #707070;
		text-align: center;
		margin-top: 30px;
	}
		#Main #product .more a {
			display: block;
			color: #FFF;
			font-size: 2.4rem;
			font-weight: 900;
			padding: 10px 0;
		}

#Main #ad {
}
	#Main #ad .set li {
		width: 340px;
		margin-right: 40px;
		margin-bottom: 40px;
	}
		#Main #ad .set li:nth-child(3n) {
			margin-right: 0px;
		}

	#Main #ad li video {
		width: 100%;
	}


	#Main #ad .set li.ad01 {
		position: relative;
	}
	#Main #ad .set li.ad01 video {
		width: 240px;
		position: absolute;
		top: 60px;
		left: 50px;
	}




#Main #contact {
}
	#Main #contact li {
		width: 536px;
		margin-right: 28px;
	}
		#Main #contact li:last-child {
			margin-right: 0px;
		}





/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}





/* 1200px */
@media screen and (max-width: 1200px) {





}





/* max 1023px */
@media screen and (max-width: 1023px) {

	
.spTitle {
	width: 30%;
	margin-bottom: 20px;
}	
.spMenu {

}
	
.scroll_list{
  margin: 0 auto;
  padding: 0;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;  /* 横スクロールの指定 */
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: 50px;
}
.spMenu li {
  margin-right: 30px;
}
	
	.spMenu a {
		color: #000;
	}	
	
	

#Main {
	background: url("../img/aerosol/bg.png") repeat;
	padding: 50px 0;
	font-size: 1.6rem;
}
#Main .inner {
	width: 1100px;
}
#Main img {
	width: 100%;
	height: auto;
}

	#Main #titleArea {
		border-top: solid 1px #000000;
		padding-top: 20px;
	}
	#Main #titleArea .right {
		display: none;
	}
	#Main #titleArea .left {
		float: none;
		width: 100%;
	}
	
	#Main #titleArea .left dd img {
		display: block;
		margin: 10px 0;
	}
	
	
	
		#Main #titleArea .left .cell01 {
			margin-bottom: 40px;
			padding-bottom: 40px;
			border-bottom: solid 1px #000000;
		}
			#Main #titleArea .left .cell01 .pht {
				width: 100%;
				float: none;
			}
			#Main #titleArea .left .cell01 dl {
				width: 100%;
				float: none;
			}
			#Main #titleArea .left .cell01 dl dt {
				margin-bottom: 10px;
			}
			#Main #titleArea .left .cell01 p {
				text-align: center;
				background: #000;
				color: #FFF;
				font-weight: 900;
				margin-bottom: 10px;
				padding: 10px;
			}
	
	
	


		#Main #titleArea .left .cell02 {
			margin-bottom: 40px;
			padding-bottom: 40px;
			border-bottom: solid 1px #000000;
		}
			#Main #titleArea .left .cell02 .pht {
				width: 100%;
				float: none;
				margin-bottom: 20px;
			}
			#Main #titleArea .left .cell02 dl {
				width: 100%;
				float: none;
			}
			#Main #titleArea .left .cell02 dl dt {
				margin-bottom: 10px;
			}


		#Main #titleArea .left .cell03 {
			margin-bottom: 40px;
		}
			#Main #titleArea .left .cell03 .pht {
				width: 100%;
				float: none;
				margin-bottom: 20px;
			}
			#Main #titleArea .left .cell03 dl {
				width: 100%;
				float: none;
			}
			#Main #titleArea .left .cell03 dl dt {
				margin-bottom: 10px;
			}

		#Main #titleArea .menu {
			margin-top: 10px;
			border: solid 2px #000;
		}
			#Main #titleArea .menu dl {
			}
			#Main #titleArea .menu dl dt {
				text-align: center;
				background: #000;
				color: #FFF;
				font-weight: 900;
			}
				#Main #titleArea .menu dl dd {
					padding: 5px 15px;
					font-size: 1.4rem;
				}








#Main #speed {
	border-top: solid 1px #000000;
	margin-bottom: 40px;
	padding-top: 40px;
}
	#Main #speed .right {
		width: 100%;
		float: none;
	}
		#Main #speed .right dl {
			padding: 0;
			margin-bottom: 0;
		}
		#Main #speed .right dl dt {
			margin-bottom: 10px;
		}

		#Main #speed .right ul {
			display: none;
		}


	#Main #speed .left {
		display: none;
	}


#Main #brand {
	border-top: solid 1px #000000;
	padding-top: 40px;
	margin-bottom: 40px;
}
	#Main #brand h3 {
		margin-bottom: 30px;
	}

	#Main #brand .left {
		float: none;
		width: 100%;
		border-right: none;
		padding-right: 0;
		margin-bottom: 40px;
	}
	#Main #brand .right {
		float: none;
		width: 100%;
	}

	#Main #brand h4 {
		font-weight: 900;
		font-size: 1.6rem;
		text-align: center;
		margin-bottom: 20px;
	}
	#Main #brand dt  {
		margin-bottom: 20px;
	}



#Main #story {
	border-top: solid 1px #000000;
	padding-top: 40px;
	margin-bottom: 40px;
	}
	
#Main #story .sp img{
	margin-bottom: 3%;
	}
	
	#Main #story h3 {
		margin-bottom: 30px;
	}
	#Main #story .cell01 {
		border-bottom: dotted 1px #000000;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	#Main #story .cell01 .left {
		float: none;
		width: 100%;
	}
	#Main #story .cell01 .right {
		float: none;
		width: 100%;
	}
	#Main #story .cell01 .right p {
		margin-bottom: 20px;
	}
		#Main #story .cell01 .right p img {
			width: 100%;
			height: auto;
			margin: 0 0 10px 0;
		}
	
	#Main #story dl {
		background: #9B9999;
		text-align: center;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		padding: 10px 0;
		margin-bottom: 10px;
	}
	#Main #story dl dt {
		font-size: 2rem;
	}

	#Main #story .text {
		margin-top: 10px;
		display: none;
	}
	#Main #story .open {
		display: block;
	}
	
	
	
	#Main #story .cell02 {
	}
	#Main #story .cell02 .left {
		float: none;
		width: 100%;
	}
	#Main #story .cell02 .right {
		float: none;
		width: 100%;
	}
	#Main #story .cell02 .left p {
		margin-bottom: 20px;
	}
		#Main #story .cell02 .left p img {
			width: 100%;
			height: auto;
			margin: 0 0 10px 0;
		}
		#Main #story video img {
			width: 100%;
			height: auto;
		}


#Main #product {
	margin-bottom: 40px;
}
	#Main #product h3 {
		text-align: center;
		font-size: 2.4rem;
		font-weight: 700;
		margin-bottom: 20px;
		
		align-items: center; /* 横線を上下中央 */
		display: flex; /* 文字と横線を横並び */
	}
	#Main #product h3::before,
	#Main #product h3::after {
		background-color: #000; /* 横線の色 */
		content: "";
		flex-grow: 1; /* 横幅いっぱい */
		height: 4px; /* 横線の高さ */
	}
	#Main #product h3::before {
		margin-right: 30px; /* 文字との余白 */
	}
	#Main #product h3::after {
		margin-left: 30px; /* 文字との余白 */
	}







	#Main #product .box {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 20px;
		border: solid 1px #000;
		padding: 10px;
	}
		#Main #product .box:last-child {
			margin-right: 0px;
		}
	#Main #product .box h4 {
		text-align: center;
		margin-top: 10px;
	}
	#Main #product .box ul {
		background: #DDDBDB;
		text-align: center;
		margin: 10px 0;
	}
		#Main #product .box ul li {
			display: inline;
			margin: 0 10px;
		}
	#Main #product .box .size {
		margin-top: 20px;
	}
	#Main #product .box .link {
		margin-top: 40px;
		text-align: right;
	}


	#Main #product .more {
		background: #707070;
		text-align: center;
		margin-top: 30px;
	}
		#Main #product .more a {
			display: block;
			color: #FFF;
			font-size: 2.4rem;
			font-weight: 900;
			padding: 10px 0;
		}

#Main #ad {
	margin-bottom: 10%;
}
	
	#Main #ad li.ad01 {
		position: relative;
	}
	#Main #ad li.ad01 video {
		width: 70%;
		position: absolute;
		top: 60px;
		left: 50%;
		margin-left: -35%;
	}
	
	
	
	
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
	
	
	
	
	
	
	

#Main #contact {
}
	#Main #contact li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
		#Main #contact li:last-child {
			margin-right: 0px;
		}
	
	
	
	
/*tabの形状*/
.tab,
.tab02 {
	text-align: center;
	margin-bottom: 30px;
}
.tab li,
.tab02 li {
	display: inline;
}
.tab li a,
.tab02 li a{

	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a,
.tab02 li.active a{
	text-decoration: underline;
}


/*エリアの表示非表示と形状*/
.area,
.area02 {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active,
.area02.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

	.swiper-slide video {
		width: 100%;
		height: auto;
	}
	
	
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}	
	
	
	
}