@charset "UTF-8";


/*========================================

  indexページ

========================================*/

.layout-search-basudokorenewal {

	/* hero---------------*/
	#hero {
		background-image: url(/basudokorenewal/img/top/hero_bg.webp);
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: top;
	}

	#hero h1 {
		padding-top: 90px;
	}

	#hero span {
		display: block;
		margin-top: 20px;
	}

	@media screen and (max-width: 767px) {
		#hero {
			background-size: 100%;
		}

		#hero h1 {
			padding-top: 20vw;
		}

		#hero span {
			margin-top: 3vw;
		}

		#hero .txt {
			margin-top: 7vw;
		}
	}



	/* #sec001---------------*/
	#sec001 {
		padding-top: 40px;
		padding-bottom: 100px;
	}

	#sec001 h2 {
		padding-bottom: 40px;
	}

	#sec001 .box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2px solid #d1d1d1;
		border-bottom: 2px solid #d1d1d1;
		padding: 40px 0;
	}

	#sec001 .search {
		width: 290px;
	}

	#sec001 .search h3 {
		color: #00ada0;
		font-size: 28px;
		font-weight: bold;
	}

	#sec001 .search ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	#sec001 .search ul li {
		list-style: none;
	}

	#sec001 .search ul li a {
		display: block;
		width: 140px;
		font-size: 22px;
		font-weight: bold;
		border-radius: 30px;
		border: 2px solid #00ada0;
		box-sizing: border-box;
		padding: .4em 0;
		transition: .3s;
	}

	#sec001 .search ul li:first-child a {
		color: #fff;
		background-color: #00ada0;
	}

	#sec001 .search ul li:last-child a {
		color: #00ada0;
	}

	#sec001 .search ul li a:hover {
		transform: translateY(-3px);
	}

	#sec001 .search ul li a .s01::before {
		content: "\f002";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		margin-right: .3em;
	}

	#sec001 .search ul li a .s02::before {
		content: "\f059";
		font-family: "Font Awesome 6 Free";
		font-weight: 400;
		margin-right: .3em;
	}

	#sec001 .box .map {
		width: 290px;
	}

	#sec001 .box .sp_map {
		display: none;
	}

	#sec001 .box2 {
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}

	#sec001 .box2 .item {
		position: relative;
		width: 330px;
		text-align: center;
	}

	#sec001 .box2 .item_b::after {
		content: "";
		display: block;
		width: 2px;
		height: 385px;
		background-color: #d0d0d0;
		position: absolute;
		top: 0;
		right: -30px;
	}

	#sec001 .box2 .item .icon {
		display: block;
		margin-top: -30px;
	}

	#sec001 .box2 .item .search {
		margin: 0 auto;
		margin-top: 10px;
	}

	#sec001 .btn {
		width: 370px;
		margin: 0 auto;
		margin-top: 90px;
	}

	#sec001 .btn a {
		display: block;
		color: #fff;
		font-size: 24px;
		font-weight: bold;
		letter-spacing: 2px;
		border-radius: 40px;
		background-color: #3a3a3a;
		padding: .8em 0;
	}

	#sec001 .btn a span::before {
		content: "\f060";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		margin-right: .5em;
	}

	#sec001 .btn a:hover {
		opacity: .7;
		transition: .3s;
	}

	@media screen and (max-width: 767px) {
		#sec001 {
			padding-top: 10vw;
			padding-bottom: 10vw;
		}

		#sec001 .sec_innr {
			padding-bottom: 0;
		}

		#sec001 h2 {
			padding-bottom: 5vw;
		}

		#sec001 h2 img {
			width: 85%;
		}

		#sec001 .box {
			flex-direction: column;
			padding: 7vw 0;
		}

		#sec001 .box .bubble img {
			width: 90%;
			margin-bottom: 3vw;
		}

		#sec001 .box .icon img {
			width: 80%;
			margin-top: 5vw;
		}

		#sec001 .search {
			width: 80%;
			margin-top: 3vw;
		}

		#sec001 .search h3 {
			font-size: 6vw;
		}

		#sec001 .search ul {
			margin-top: 3vw;
		}

		#sec001 .search ul li a {
			width: 29vw;
			font-size: 4vw;
			border-radius: 5vw;
		}

		#sec001 .box .map {
			display: none;
		}

		#sec001 .box .sp_map {
			display: block;
		}

		#sec001 .box .sp_map img {
			width: 90%;
		}

		#sec001 .box2 {
			flex-direction: column;
			margin-top: 0;
		}

		#sec001 .box2 .item {
			width: 100%;
			padding-top: 7vw;
			padding-bottom: 7vw;
		}

		#sec001 .box2 .item_b::after {
			content: "";
			display: block;
			width: 100%;
			height: 2px;
			background-color: #d0d0d0;
			position: absolute;
			top: auto;
			bottom: 0;
			right: 0;
			left: 0;
			margin: 0 auto;
		}

		#sec001 .box2 .item .bubble img {
			width: 90%;
		}

		#sec001 .box2 .item .icon {
			display: block;
			margin-top: -7vw;
		}

		#sec001 .box2 .item .icon img {
			width: 33%;
		}

		#sec001 .box2 .item .search {
			margin: 0 auto;
			margin-top: 3vw;
		}

		#sec001 .btn {
			width: 65%;
			margin-top: 10vw;
		}

		#sec001 .btn a {
			font-size: 4vw;
			border-radius: 10vw;
			padding: 1em 0;
		}
	}
}