/*Base_CSS*/

#main500{
	display:inline;
	width:500px;
}
				
#main1000{
	display:none;
}

* {
    font-family: "Hiragino Mincho ProN W6", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	/*font-weight: 1000;		*/

	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}


		
			
body{
	width: 100%;
	margin:0;
	display: flex;
	padding:0;
	text-align:center;
	overflow-x: hidden;
	background-image: url(../images/background.png);
	background-position: top, center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	z-index: 999;
}

@media screen and (max-width:1200px) {
	body{
		background-image: url(../images/background.png);
	}
}

main{
	width: 500px;
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1000;
}

section{
	max-width: 500px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

a{
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

@media screen and (max-width:1200px) {
	.sidebar{
		display: none;
	}
}

	
	/* 各ブロック背景色 */





/*Main_CSS*/

/*storelink_fixed*/
.storelink{
	width: 175px;
	position: fixed;
	bottom: 30px;
	right:calc(50% - 500px/2) ; 
	z-index: 1099;
}


@media screen and (max-width:500px) {

	.storelink{
		width: 35%;
		bottom:20px;
		right:0 ; 
	}
}



.storelink_icon{
	/*
	filter: drop-shadow(5px 5px 5px #aaa);
	*/
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/*section1*/
.sec1_1{
	position: relative;
	margin: 5% 0;
	margin-bottom:10%;
}

.top_img{
	position: relative;
}

.sec1_img1{
	position: absolute !important;
	top:40%;
	right: 10%;
}

.sec1_img3{
	margin-top: 5%;
}

.sec1_2{
	background-color: #D40C16;
	height: 35vh; /*仮の高さ指定*/
}

.sec1_img4{
	margin-top: 25%;
}

.sec1_3{
	padding: 5%;
}


/*section2*/

.sec2{
	padding: 3% 0;
}

.sec2_1{
	position: relative;
}

.sec2_img2{
	position: absolute !important;
	top: 13%;
	right: 6%;
}

.sec2_img3{
	position: absolute;
	bottom: 15%;
	right: 12.5%;
}


/*section3*/
.sec3{
	position: relative;
}

.sec3_1{
	margin-top: -12.5%;
}

.sec3_column{
	position: relative;
	display: flex;
	width: 100%;
}

.sec3_2{
	position: absolute;
	top: 30%;
	left: 0%;
}

.sec3_3{
	position: absolute;
	top: 49.5%;
	right: 0%;
}

.sec3_4{
	position: absolute;
	bottom: 20%;
	left: 0%;
}

.sec3_img2{
	position: absolute;
	top: -20%;
	right: 7.5%;
}

.sec3_img3{
	position: absolute;
	width: 20%;
	bottom: -40%;
	left: 7.5%;
	z-index:100;
}

.sec3_img6{
	width: 20%;
	position: absolute;
	top: -35%;
	right: 12.5%;
}

/*section4*/
.sec4_title{
	margin-bottom: 5%;
}

.sec4_subtitle{
	width: 85%;
}

.sec4_text{
	width: 95%;
	margin: 4% auto;
	padding: 0 7.5%;
	text-align: left;
	line-height: 1.5;
	color: #fff;
}

.sec4_6{
	padding-bottom: 10%;
}

/*section5*/

.sec5{
	position: relative;
}

.sec5_1{
/*
	position: absolute;
	top: 25%;
	left: -5%;
*/
}

.sec5_2{
/*
	position: absolute;
	top: 43.5%;
	left: 18%;
*/
	width: 85%;
	margin:auto;
	text-align: left;
}

.sec5_3{
/*
	display: flex;
	width: 200%;
	position: absolute;
	bottom: 23%;
	*/
	
	margin-top:50px;
	margin-bottom:50px;
	
}

.sec5_4{
/*
	position: absolute;
	bottom: 10%;
	left: 15%;
	*/

	width: 85%;
	margin:auto;
	text-align: left;
	margin-bottom:100px;
}

.sec5_5{
/*
	position: absolute;
	bottom: 5%;
*/
}

/*section6*/



.sec6_colum{
	width: 85%;		
	margin: 0 auto;
	margin-bottom: 5%;
}

.sec6_5{
	margin-bottom: 0%;
}

.sec6_6{
	margin-top: 2.5%;
	width:100%;
	z-index: 1000;
	bottom: -70px;
    position: relative;
}

/*section7*/

.sec7{
	position: relative;
}

.sec7_1 {
	
	top: 25%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 800px;
	margin-top: 50px;
  }
  
  .item {
	width: 50%;
	height: 10%;
	margin-bottom: 20px;
	color: #000;
	text-decoration: none;
  }

  .item:hover{
	text-decoration: none;
	color: #000;
  }

  .item_title{
	text-align: left;
	margin-left: 15%;
  }

  .item_disp{
	width: 70%;
	margin: 3% auto;
	text-align: left;
	font-size: small;
	font-weight: 500;
  }

  .tag{
	text-align: left;
	margin-left: 12.5%;
  }
  
/*section8*/

.sec8{
}

.sec8_3{
	width: 80%;
	margin: 5% auto;
	text-align: left;
	font-size: 0.9rem;
	font-weight: 1;
	line-height: 2;
	color: #fff;
}

.sec8_5{
	margin: 7.5% 0;
}

/*section9*/
.sec9{
}

.store		{
	width:960px;
	max-width:960px;
	margin:auto;
	}

.store-960	{
	width:960px;
	max-width:960px;}
.store-520	{
	width:520px;
	max-width:520px;}
.store-100	{
	width:100%;
	max-width:100%;}


.store_title{
	font-size:1.8rem;
	color:#000;
}


.store-960 .area		{
	height:200px;
	width:220px;
	margin:10px;
	float:left;
	}

.area_title	{
	background:#000;
	color:#fff;
	margin: 0 auto;
	padding:12px 0 10px 0;
	padding-left:30px;
	font-size:1.5rem;
	font-weight:bold;
	text-align:left;
	}

.pref		{
	padding-top:10px;
	padding-left:30px;
	}
	
.store-960 .prefname	{
	width:90px;
	float:left;
	}
	
.prefname a	{
	text-decoration:none;
	color:#000;
	}

.prefname a:hover	{
	text-decoration:underline;
	color: #000;
	}visible
	
.prefname	{
	float:left;
	width:80px;
	font-size:0.9rem;
	margin-bottom:5px;
	font-weight:bold;
	text-align:left;
	}
	
.prefname::after {
	  content: ">";
	  color:#b6b6b6;
	
	margin-left:7px;
	}
	
			
.store-100 		{
		margin:0;
		}
					
.store-100 .store_title		{
		margin:10px 0 0px 0;
		}

.store-100 .store_title2	{
		font-size:0.8rem;
		font-weight:bold;
		}

.store-100 .area	{
	width:100%;
	margin: 0 auto;
	}

.store-100 .area_title	{
	width:calc(100% - 40px);
	height: 60px;
	}
	
.store-100 	table	{
	width:100%;		
	margin:20px 0;	
	}
	
.store-100 	table td	{
	padding-left:50px;
	vertical-align:top;
	}
	
.pref-100	{
	width:49%;
	}

.pref-100R	{
	width:49%;
	
	border-left:1px solid #b6b6b6;
	}

.store-100 .prefname	{
	margin-bottom:10px;
	text-align:left;
	font-size: 1.1rem;
	}

/*section10*/
.sec10{
	padding-bottom: 10%;
}

.sec10_1{
	padding-top: 5%;
}

.sec10_2{
	padding-top: 7%;
}

.sec10_3{
	margin-top: 5%;
	font-size: 0.7rem;
	font-weight: 1;
}

	  /*==================================================
	スライダーのためのcss
	===================================*/
	.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
	    width:94%;
	    margin:0 auto;
	}

	.slider img {
	    width:300px;/*スライダー内の画像を60vwにしてレスポンシブ化*/
	    height:auto;
	}


	@media screen and (max-width:500px) {
	.slider img {
	    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
	    height:auto;
	}



	}

	.slider .slick-slide {
		transform: scale(0.8);/*左右の画像のサイズを80%に*/
		transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
		opacity: 0.5;/*透過50%*/
	}

	.slider .slick-slide.slick-center{
		transform: scale(1);/*中央の画像のサイズだけ等倍に*/
		opacity: 1;/*透過なし*/
	}


	/*矢印の設定*/

	/*戻る、次へ矢印の位置*/
	.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-next:before {
	    content: '';
	}


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

	.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{
	    1background:#333;/*ドットボタンの現在地表示の色*/
	}

	/* Youtube */

		.thumb span {
		  position: relative;
		  display: block;
		  text-decoration: none;
		}
		 
		.thumb span:before {
		  position: absolute;
		  content: "";
		  display: block;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  border-radius: 50%;
		  border: 6px solid #D40C16;
		  width: 60px;
		  height: 60px;
		}
		 
		.thumb span:after {
		  position: absolute;
		  content: "";
		  display: block;
		  top: 50%;
		  left: 50%;
		  transform: translate(-40%, -50%);
		  border-style: solid;
		  border-color: transparent transparent transparent #D40C16;
		  border-width: 15px 0 15px 25px;
		}



	/* アニメーション */
	.fadeUp {
		animation-name: fadeUpAnime;
		animation-duration:2s;
		animation-fill-mode:forwards;
		opacity: 0;
	}
	
	@keyframes fadeUpAnime{
		from {
			opacity: 0;
			transform: translateY(100px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	
	.fadeLeft {
		position: relative;
		right: -400px;
		animation-name: slide-left_sec4;
		animation-duration: 2s;
		animation-timing-function: initial;
		animation-fill-mode: forwards;
		z-index: 30;
	}

	@keyframes slide-left_sec4{
		0% {
		  right: -400px;
		}
		
		100% {
		 right: 0px;
		}
	}

	.fadeRight{
		position: relative;
		left: -400px;
		animation-name: slide-right_sec4;
		animation-duration: 2s;
		animation-timing-function: initial;
		animation-fill-mode: forwards;
	}

	@keyframes slide-right_sec4{
		0% {
		  left: -400px;
		}
		
		100% {
		 left: 0px;
		}
	}


	/* 画像を中央揃えするためのスタイル */
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	/* タイヤ回転する画像のスタイル */
	.rotate {
		animation: rotate 2s linear infinite;
	}

	/* 回転するアニメーションのキーフレーム */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}