@charset "utf-8";

/*=============================
　　　　title
===============================*/
.section_title_wrap{
	margin-bottom: 90px;
}
.section_title_wrap p{
	color: var(--c_orange);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1.5px;
	margin-bottom: 25px;
}
.section_title_wrap h2{
	font-size: 40px;
	font-weight: 600;
	letter-spacing: 4.0px;
}

/*=============================
　　　　parts
===============================*/
.orange{
	color: var(--c_orange);
}
.orange50{
	color: var(--c_orange50);
}
.inner {
	width: 1320px;
	margin: 0 auto;
	padding: 0 60px;
}
.outer {
	margin-left: calc((100% - 1320px) / 2);
	padding: 0 0 0 60px;
}


/*=============================
　　　　mv
===============================*/
#mv {
	position: relative;
	z-index: 1;
	padding-top: 140px;
}
#mv .mv_flex {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	margin: 0 auto;
	padding-left: 60px;
	background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0));
}
#mv .mv_flex .mv_left {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#mv .mv_flex .mv_left .local {
	color: #fff;
	font-size: 22.5px;
	font-weight: 500;
	background: var(--c_brown);
	margin-bottom: 15px;
	padding: 12px 0;
  text-align: center;
  border-radius: 99px;
}
#mv .mv_flex .mv_left .ie_logo {
	width: 396px;
	margin-bottom: 45px;
}
#mv .mv_flex .mv_left > .wrap {
	display: flex;
	align-items: center;
	width: auto;
}
#mv .mv_flex .mv_left > .wrap .ishikari {
	width: 293px;
	margin-right: 15px;
}

#mv .mv_flex .mv_right {
	width: 70%;
	aspect-ratio: 156 / 100;
	max-height: 700px;
}
#mv .mv_flex .mv_right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 70%;
	border-bottom-left-radius: 60px;
	border-top-left-radius: 60px;
}


/*=============================
　　　　intro
===============================*/

#intro {
	background: linear-gradient(rgba(255, 255, 255, 0) 85%, var(--c_pale50)), url(../images/intro/bg_intro.webp) no-repeat;
	background-position: center 78%;
	background-size: cover;
	margin-top: -100px;
}
#intro .inner {
	margin: 0 auto;
	padding: 240px 60px;
}
#intro p {
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	line-height: 3.0;
	letter-spacing: 2.5px;
}

/*=============================
　　　　features
===============================*/

#features {
	padding: 100px 0 120px;
	margin-top: -100px;
	scroll-margin-top: 60px;
}
.features {
	position: relative;
}
.features::before {
	position: absolute;
	content: "";
	width: calc(((100% - 1320px)/2) + 1155px);
	height: 100%;
	top: 0;
	left: 0;
	background: var(--c_pale);
	border-bottom-right-radius: 60px; 
	border-top-right-radius: 60px; 
}
#features .card_wrap {
	width: 1200px;
}
#features .card_wrap ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
	grid-row-gap: 30px;
	justify-content: space-between;
	margin-bottom: 30px;
}
#features .card_wrap ul li {
	position: relative;
	width: calc((1200px - 30px)/2);
	height: 158px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	border-radius: 17.5px;
  box-shadow: var(--bs_basic);
	padding-left: 68px;
  padding-right: 43px;
}
#features .card_wrap ul li:before {
	position: absolute;
	content: "";
	width: 18.5px;
	aspect-ratio: 1 / 1;
	border-radius: 99px;
	top: 50%;
	left: 28px;
	transform: translateY(-50%);
	background: var(--c_pale50);
}

#features .card_wrap ul li > h3 {
	position: relative;
	font-size: 22.2px;
	font-weight: 600;
	padding-bottom: 12px;
	margin-bottom: 14px;
}
#features .card_wrap ul li > h3::before {
	position: absolute;
	background: radial-gradient(circle farthest-side, #a19b98, #a19b98 30%, transparent 30%, transparent);
	background-size: 8px;
	content: '';
	display: inline-block;
	height: 8px;
	width: 100%;
	bottom: -8px;
	left: 0;
}

#features .card_wrap ul li > h3 .min {
	font-size: 13px;
	vertical-align: 45%;
	color: #736965;
	margin-left: 5px;
}
#features .card_wrap ul li > p {
	font-size: 16.6px;
	font-weight: 600;
	line-height: 1.7;
}
#features .complement {
	font-size: 15px;
	color: #736965;
}

/*=============================
　　　　features
===============================*/
#facility {
	padding: 150px 0 100px;
}
.facility {
	position: relative;
}
.facility::before {
	position: absolute;
	content: "";
	background: linear-gradient(to bottom, var(--c_pale50), var(--c_pale));
	width: 100%;
	height: 365px;
	bottom: 0;
	left: 0;
}

#facility .img_wrap ul {
	display: flex;
	width: 1200px;
	column-gap: 50px;
}
#facility .img_wrap ul li {
	width: calc((1200px - 50px)/2);
	height: 405px;
}
#facility .img_wrap ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 34%;
	border: 6px solid #fff;
	border-radius: 20px;
}

/*=============================
　　　　usage
===============================*/
#usage {
	padding: 150px 0 0;
	margin-bottom: 120px;
}
#usage .section_title_wrap {
	margin: 0 auto 90px;
}

#usage .whiteback {
	background: #fff;
	border-bottom-left-radius: 60px;
	border-top-left-radius: 60px;
	box-shadow: var(--bs_basic);
	padding: 100px 0 120px;
}
#usage .whiteback > .inner {
	width: 100%;
	padding: 0;
	margin: 0;
}

#usage .use {
	padding: 0 0 110px 120px;
}
#usage .use.overview {
	border-bottom: 2px solid var(--c_border);
	width: 100%;
}
#usage h3 {
	font-size: 32px;
	padding-left: 25px;
	border-left: 6px solid var(--c_orange);
	letter-spacing: 2px;
  font-weight: 500;
	margin-bottom: 35px;
}
#usage .o_table_wrap {
	display: flex;
	justify-content: space-between;
	gap: 70px;
	width: 960px;
	margin-bottom: 50px;
}
#usage .use .o_table_wrap table {
	width: calc((100% - 70px)/2);
}
#usage .use .o_table_wrap table tr {
	border-top: 1px solid var(--c_border);
}
#usage .use .o_table_wrap table tr:last-child {
	border-bottom: 1px solid var(--c_border);
}

#usage .use .o_table_wrap table tr th,
#usage .use .o_table_wrap table tr td{
	font-size: 16px;
	font-weight: 500;
	padding-block: 17px;
	line-height: 1.1;
}
#usage .use .o_table_wrap table tr th {
	padding-left: 10px;
	background: var(--c_pale50);
}
#usage .use .o_table_wrap table tr td {
	padding-left: 20px;
}
#usage .use .gmap {
	width: 960px;
	height: 250px;
	border-radius: 15px;
}
#usage .min_title_wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top: 2px solid var(--c_orange);
	background: var(--c_pale50);
	height: 100px;
	padding: 20px 30px;
	margin-bottom: 30px;
}
#usage .min_title_wrap h4 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 10px;
	position: relative;
	padding-left: 45px;
}
#usage .min_title_wrap h4.no1::before,
#usage .min_title_wrap h4.no2::before {
	position: absolute;
	width: 33px;
	height: 33px;
	color: #fff;
	background: var(--c_orange);
	border-radius: 99px;
	left: 0;
	top: -5px;
	font-size: 85%;
	text-align: center;
	line-height: 32px;
}
#usage .min_title_wrap h4.no1::before {
	content: "1";
}
#usage .min_title_wrap h4.no2::before {
	content: "2";
}
#usage .fee {
	padding: 100px 0 0 120px;
	width: 1080px;
}

#usage .min_title_wrap p {
	font-size: 16px;
	font-weight: 500;
	margin-left: 45px;
}
#usage .f_table_flex {
	display: flex;
	justify-content: space-between;
	margin-bottom: 90px;
}
#usage .f_table_flex:last-child {
	margin-bottom: 0;
}

/*左側（利用者負担金額）の表*/
#usage .f_table_flex .table_wrap.left table {
	width: 360px;
}
/*右側（加算項目）の表*/
#usage .f_table_flex .table_wrap.right table {
	width: 540px;
}
/*左側（利用者負担金額）と右側の表共通スタイル*/
#usage .f_table_flex .table_wrap table {
	border: 2px solid var(--c_orange);
	border-radius: 20px;
	border-collapse: separate;
	overflow: hidden;
}
/* #usage .f_table_flex .table_wrap table tr {
	
} */
#usage .f_table_flex .table_wrap table tr:nth-child(2n) {
	background: var(--c_gray);
}
#usage .f_table_flex .table_wrap table tr:nth-child(2n+1) {
	background: #fff;
}
#usage .f_table_flex .table_wrap table tr:first-child {
	background: var(--c_orange);
	color: #fff;
}
#usage .f_table_flex .table_wrap table tr th,
#usage .f_table_flex .table_wrap table tr td {
	padding-top: 13px;
	padding-bottom: 13px;
	line-height: 1.7;
}
#usage .f_table_flex .table_wrap table tr th {
	padding-left: 20px;
}

#usage .f_table_flex .table_wrap table tr th > span{
	letter-spacing: 10px;
}

#usage .f_table_flex .table_wrap table tr td {
	padding-right: 20px;
	text-align: right;
	vertical-align: middle;
}

#usage .f_table_flex .kind {
	font-size: 20px;
	font-weight: 500;
	position: relative;
	padding-left: 25px;
	margin-bottom: 20px;
}
#usage .f_table_flex .kind:before {
	content: "";
	position: absolute;
	width: 12px;
	aspect-ratio: 1 / 1;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	border-radius: 99px;
	background: var(--c_orange);
}


/*=============================
　　　　contact
===============================*/
#contact {
	position: relative;
	font-weight: 600;
	padding: 0 0 0;
}
.contact {
	position: relative;
}
.contact::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 250px;
	top: 125px;
	left: 0;
	background: var(--c_pale);
}

#contact .inner{
	width: 1320px;
	margin: 0 auto;
}
#contact .bn_contact {
	/*position: relative;*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 1200px;
	height: 250px;
	border-radius: 60px;
	background: url("../images/contact/bg_contact.webp") repeat;
	background-size: cover;
	background-position: center;
	box-shadow: var(--bs_basic);
	padding-left: 120px;
	margin: 0 auto 240px;
}

#contact .bn_contact .tel_number a .arrow_wrap {
	display: flex inline;
	align-items: center;
	width: 35px;
	height: 44px;
	margin-right: 15px;
	overflow: hidden;
}
#contact .bn_contact .tel_number a .arrow_wrap img {
	transform: translate(0 , 0);
	transition: all 0.5s ease 0.1s;
}
@media (any-hover: hover){
	#contact .bn_contact .tel_number a:hover .arrow_wrap img {
		transform: translate(calc(-100% - 15px) , 0);
		transform-origin: left top;
	}
}
#contact .bn_contact .tel_number .arrow_wrap .arrow_right {
	width: 35px;
	height: auto;
	margin-right: 15px;
}
#contact .bn_contact .text {
	font-size: 23px;
	margin-bottom: 15px;
	letter-spacing: 0.7px;
}
#contact .bn_contact .text .small {
	font-size: 65%;
}
#contact .bn_contact .tel_number {
	font-size: 18px;
	letter-spacing: 1px;
}
#contact .bn_contact .tel_number a {
	color: var(--c_brown);
	font-size: 47px;
	text-decoration: none;
	letter-spacing: 1.5px;
	border-bottom: 2px solid var(--c_brown);
	margin-right: 20px;
}
#contact a {
	transition: all ease 0.3s;
}
#contact .bn_insta {
	display: block;
	width: 693px;
	height: auto;
	border-radius: 30px;
	box-shadow: var(--bs_basic);
	margin: 0 auto;
}
#contact .inner > a {
	display: block;
	width: fit-content;
	margin: 0 auto;
}


/*=============================
　　　　contact
===============================*/
#company {
	padding: 150px 0 96px;
}
#company .inner .section_title_wrap {
	margin-bottom: 0;
}
#company .inner {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
#company .inner table {
	width: 765px;
	font-size: 18px;
	line-height: 1.6;
}
#company .inner table tr {
	border-top: 1px solid var(--c_border);
}
#company .inner table tr:last-child {
	border-bottom: 1px solid var(--c_border);
}
#company .inner table tr th,
#company .inner table tr td {
	font-weight: 600;
	padding: 25px 28px;
 	
}
#company .inner table tr th {
	width: 168px;
}
#company .inner table tr td {
	width: calc(100% - 168px);
}