@charset "utf-8"; 

/* ===========================================================================================================================
	トップページ top css
	
	---- INDEX ----
	メインビジュアルスライダー（パララックス）
	コンテンツバナー
============================================================================================================================== */
/* メインビジュアルスライダー（パララックス）
------------------------------------------ */
.slider {
	width: 100%;
	position: sticky;
	left: 0;
	z-index: -1;
}
.slider ul {
	clear: both;
	width: 100%;
}
.slider ul li img{
	width: 100%;
}
@media screen and (min-width: 1000px) {/* PC */
	#visualSp {
		display: none;/*SP用スライダーを非表示*/
	}
	.slider {
		top: 130px;/*ヘッダー分空ける*/
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	#visual {
		display: none;/*PC用スライダーを非表示*/
	}
	.slider {
		top: 80px;/*ヘッダー分空ける*/
	}
}
@media screen and (max-width: 767px) {/* SP */
	#visual {
		display: none;/*PC用スライダーを非表示*/
	}
	.slider {
		top: 60px;/*ヘッダー分空ける*/
	}
}

/* パララックス（今回は使用しない）
------------------------------------------ */
.parallax {
	width: 100%;
	height: 50vh;
	position: sticky;
	top: 130px;/*ヘッダー分空ける*/
	left: 0;
	z-index: -1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	.parallax {
		top: 80px;/*ヘッダー分空ける*/
		height: 50vh;
	}
}
@media screen and (max-width: 767px) {/* SP */
	.parallax {
		top: 60px;/*ヘッダー分空ける*/
		height: 30vh;
	}
}
.parallax01 {
  background-image: url("../../img_top/visual1.jpg");
}
.parallax02 {
  background-image: url("../../img_top/visual2.jpg");
}
.parallax03 {
  background-image: url("../../img_top/visual3.jpg");
}

/* コンテンツバナー
------------------------------------------ */
ul.top_banner {
	display: flex;
	flex-wrap: wrap; /* 内包要素を折り返す（内包要素にwidth:を指定） */
	justify-content: space-between;/* 内包要素を両端に合わせて均等間隔に配置 */
}
ul.top_banner li a {
	display: block;
	position: relative;
}
li.top_banner-about a {
	background: url("../../img_top/top_banner1.jpg") no-repeat;
}
li.top_banner-corporate a {
	background: url("../../img_top/top_banner2.jpg") no-repeat;
}
li.top_banner-personal a {
	background: url("../../img_top/top_banner3.jpg") no-repeat;
}
li.top_banner-price a {
	background: url("../../img_top/top_banner4.jpg") no-repeat;
}
ul.top_banner li a h3 {
	font-family: 'Noto Serif JP', serif;
	color: #fff;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translate(0, -50%);
}
p.top_banner_readmore {
	position: absolute;
	top: 90%;
	right: 0;
	transform: translate(0, -90%);
}
@media screen and (min-width: 768px) {/* PC & TB */
	/*事務所について*/
	li.top_banner-about {
		width: 100%;
	}
	li.top_banner-about a {
		background-size: cover;
		aspect-ratio: 10 / 3;
	}
	/* 法人のお客様*/
	li.top_banner-corporate {
		width: 30%;
	}
	li.top_banner-corporate a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	/* 個人のお客様*/
	li.top_banner-personal {
		width: 30%;
	}
	li.top_banner-personal a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	/* 料金体系*/
	li.top_banner-price {
		width: 30%;
	}
	li.top_banner-price a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	ul.top_banner li a h3 {
		font-size: 28px;
	}
}
@media screen and (min-width: 1000px) {/* PC */
	li.top_banner-about {
		margin: 0 0 50px 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
	li.top_banner-about {
		margin: 0 0 30px 0;
	}
}
@media screen and (max-width: 767px) {/* SP */
	ul.top_banner li {
		width: calc((100% - 10px) / 2);
		margin-bottom: 10px;
	}
	li.top_banner-about a {
		background-position: center center;
		background-size: auto 100%;
		aspect-ratio: 1 / 1;
	}
	li.top_banner-corporate a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	li.top_banner-personal a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	li.top_banner-price a {
		background-size: cover;
		aspect-ratio: 1 / 1;
	}
	ul.top_banner li a h3 {
		font-size: 20px;
	}
}


@media screen and (min-width: 1000px) {/* PC */
}
@media screen and (min-width: 768px) and (max-width: 999px) {/* TB */
}
@media screen and (max-width: 767px) {/* SP */
}