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



/****************************************************************************************************
topページ
****************************************************************************************************/

/*ヘッダー*/

/* 初期表示アニメーション関連部分 */
.firstView01 , .firstView02 {
	opacity: 0; /* 初期状態は透明 */
	transition: opacity 0.5s ease-in-out; /* ～秒かけて透明度を変化 */
	
}
.firstView01.show , .firstView02.show {
	opacity: 1; /* フェードイン完了後は不透明 */
}
.secondView01 , .secondView02 {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.secondView01.show , .secondView02.show {
	opacity: 1;
}
.thirdView {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.thirdView.show {
	opacity: 1;
}

/*メインイメージスライドショー*/
.mainSlideImg {
	width: 100%;
	min-height: 850px;
	overflow: hidden;
}
.img01, .img02, .img03, .img04{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
.img01{
   background-image: url('../img/index/mainimg-01.png');
   animation: slide-animation-01 12s infinite;
   animation-delay: 3s;
}
.img02{
   background-image: url('../img/index/mainimg-02.png');
   animation: slide-animation-02 12s infinite;
   animation-delay: 3s;
}
.img03{
   background-image: url('../img/index/mainimg-03.png');
   animation: slide-animation-03 12s infinite;
   animation-delay: 3s;
}
.img04{
   background-image: url('../img/index/mainimg-04.png');
   animation: slide-animation-04 12s infinite;
   animation-delay: 3s;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  25% {opacity: 1;}
  30% {opacity: 0; transform: scale(1.01);}
  95% {opacity: 0;}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  20% {opacity: 0; transform: scale(1.0);}
  25% {opacity: 1;}
  50% {opacity: 1;}
  55% {opacity: 0; transform: scale(1.01);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  45% {opacity: 0;  transform: scale(1.0);}
  50% {opacity: 1;}
  75% {opacity: 1;}
  80% {opacity: 0; transform: scale(1.01);}
100% {opacity: 0;}
}
@keyframes slide-animation-04 {
	5% {opacity: 0; transform: scale(1.01)}
	10% {opacity: 0;}
  70% {opacity: 0;  transform: scale(1.0);}
  75% {opacity: 1;}
  100% {opacity: 1;}
}

.mainLogo {
	position: absolute;
	top: 35%;
	left: 47%;
}
.mainLogo img{
	display: block;
}

.michelin{
	position: absolute;
	right: 5%;
	bottom: 5%;
}
.michelin img{
	display: block;
}

/*コンテンツエリア*/

/*ブロックフェードイン表示*/
.mainFIBlock {
	opacity: 0;                /* 初期状態：透明 */
	transform: translateY(5px);  /*初期状態：下に5pxずらす */
	transition: opacity 1s ease-out, transform 1s ease-out; /* ふわっとさせる設定 */
}
.mainFIBlock.is-show { /* JSで追加する表示用クラス */
	opacity: 1;                /* 透明度を戻す */
	transform: translateY(0);   /*位置を元に戻す */
}
	/*左画像配置*/
	.secBlock.imgLeft .secImgBox.mainFIBlock,
	.secBlock.imgLeft .secMapBox.mainFIBlock {
		transform: translateX(-20px);  /*初期状態：左に20pxずらす */
	}
	.secBlock.imgLeft .secImgBox.mainFIBlock.is-show,
	.secBlock.imgLeft .secMapBox.mainFIBlock.is-show {
		transform: translateX(0);   /*位置を元に戻す */
	}
	.secBlock.imgLeft .secTxtBox.mainFIBlock {
		transform: translateX(20px);  /*初期状態：右に20pxずらす */
	}
	.secBlock.imgLeft .secTxtBox.mainFIBlock.is-show {
		transform: translateX(0);   /*位置を元に戻す */
	}
	/*右画像配置*/
	.secBlock.imgRight .secImgBox.mainFIBlock,
	.secBlock.imgRight .secMapBox.mainFIBlock {
		transform: translateX(20px);  /*初期状態：右に20pxずらす */
	}
	.secBlock.imgRight .secImgBox.mainFIBlock.is-show,
	.secBlock.imgRight .secMapBox.mainFIBlock.is-show {
		transform: translateX(0);   /*位置を元に戻す */
	}
	.secBlock.imgRight .secTxtBox.mainFIBlock {
		transform: translateX(-20px);  /*初期状態：左に20pxずらす */
	}
	.secBlock.imgRight .secTxtBox.mainFIBlock.is-show {
		transform: translateX(0);   /*位置を元に戻す */
	}

.catchArea {
	width: 100%;
	padding: 80px 0;
	text-align: center;
}
.catchTitle {
	margin-bottom: 20px;
}
.catchBody {
	margin-bottom: 20px;
}
.catchSub {
	margin-bottom: 35px;
	padding: 0 30px;
}

.secBlock {
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #EBEBEB;
	overflow: hidden;
}
.imgRight {
	flex-direction: row-reverse;
}

.secImgBox {
	width: 64%;
}
.secImgBox img {
	display: block;
	width: 100%;	
}

.secMapBox {
	width: 64%;
	height: 500px;
}
.secMapBox iframe {
	width:100%;
	height:100%;
}

.secTxtBox {
	width: 36%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.secTxtTitle {
	margin-bottom: 20px;
}
.secTxtBody {
	padding: 0 30px;
}
.secTxtBody p {
	margin-bottom: 20px;	
}
.secTxtBody ul {
	width: fit-content;
	font-size:13px;
	line-height: 2.0;
	text-align: left;
	margin: 0 auto 20px auto;
}


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

	/*ヘッダー*/
	.mainSlideImg {
		min-height: 450px;
	}
	.img01, .img02, .img03, .img04{
		overflow: hidden;
        background-position-x: 50%;
	}
	.mainLogo {
		top: 25%;
		left: 42%;
	}
	.mainLogo img {
		width: 70%;
	}
	.michelin {
		bottom: 5%;
		right: 5%;
	}
	.michelin img {
		width: 97px;
		height: 97px;
	}

	/*コンテンツエリア*/
	.catchArea {
		padding: 40px 0 20px 0;
	}
	.catchSub {
		margin-bottom: 30px;
	}

	.secBlock {
		flex-direction: column;
		justify-content: center;
	}
	.imgRight {
		flex-direction: column;
	}

	.secImgBox {
		width: 100%;
	}

	.secMapBox {
		width: 100%;
		height: 250px;
	}

	.secTxtBox {
		width: 100%;
		padding: 35px 0 45px 0;
	}
	.secTxtTitle {
		margin-bottom: 10px;
	}
	.secTxtBody p {
		margin-bottom: 10px;
	}
	.secTxtBody ul {
		font-size: 12px;
		line-height: 1.8;
		margin: 0 auto 20px auto;
	}

}