@charset "utf-8";
/* 「相談予約」レスポンシブCSS */

/**/
/*★ リセット ★*/
h1, h2, h3, h4, h5, h6, p, ul {
  font-weight: inherit;
  font-size: 1em;
}
ol {
  margin: 0;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
}
.main {
	font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}
.main div:not([class])::after {
  content: none;
}
.main b {
  font-weight: normal;
}
.main .is-em {
  font-weight: bold;
}
.is-inline-block {
  display: inline-block;
}
@media (width < 861px) {
  .is-dsp-pc {
    display: none !important;
  }
}
@media (width >= 861px) {
  .is-dsp-sp {
    display: none !important;
  }
}

/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
	color: #333;
  position: relative;
}
:root {
	--default-width-sp: (710vw / 7.5);
	--default-width-pc: 960px;
	--default-width: min((710vw / 7.5), 960px);
}
.main {
	margin-bottom: min((50vw / 7.5), 40px);
}
.section__inner {
	width: var(--default-width);
  margin: auto;
}

/*★ headerArea ★*/
.mv {
	width: var(--default-width);
  margin: auto;
}

/*★ step ★*/
.step__list--item {
	counter-increment: number;
	margin-top: min((48vw / 7.5), 55px);
}
.step__list--item--title {
	font-size: min((32vw / 7.5), 24px);
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 2px solid #0853a4;
	display: flex;
	gap: 0 min((14vw / 7.5), 22px);
	align-items: center;
	padding-bottom: 12px;
	&::before {
		content: counter(number);
		width: min((54vw / 7.5) ,54px);
		height: min((54vw / 7.5) ,54px);
		display: flex;
		background: #0853a4;
		font-size: min((45vw / 7.5) ,45px);
    color: #fff;
		justify-content: center;
    align-items: center;
		padding-bottom: .1em;
	}
}
.step__list--item--detail {
	margin: 1em auto;
}
.step__list--item--sub {
	font-size: min((24vw / 7.5), 18px);
	font-weight: bold;
	&:not(:first-child) {
		margin-top: 1em;
	}
}
.step__list--item--text {
	font-size: min((22vw / 7.5), 16px);
	line-height: 1.2;
}
.step__notes {
	margin-top: .7rem;
}
.step_notes--item {
	font-size: min((24vw / 7.5), 16px);
	text-indent: -1em;
	padding: .4em 0 0 1em;
	line-height: 1.2;
}

/*★ branch ★*/
.branch__nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 30px 0 15px
}
.branch__nav--item {
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
}
.branch__nav--item--link {
	display: block;
	width: 100%;
	text-decoration: underline;
	color: inherit;
}
.branch__title {
	display: grid;
	grid-template-columns: 1fr;
	font-size: min((26vw / 7.5), 18px);
	font-weight: bold;
	color: #fff;
	background: #50a13e;
	text-align: center;
	padding: min((18vw / 7.5), 15px) min((10vw / 7.5), 10px) min((10vw / 7.5), 20px);
	margin-top: min((50vw / 7.5), 60px);
	.branch__title--main {
		display: block;
		font-size: min((32vw / 7.5), 32px);
		color: #fff33f;
		em {
			padding-left: min(((72vw / 7.5) + (15vw / 7.5)), (72px + 25px));
			position: relative;
			&::before {
				display: block;
				content: "";
				width: min((72vw / 7.5), 72px);
				height: min((58vw / 7.5), 58px);
				background: url(../images/iconShop.png) no-repeat 0 0 / contain;
				position: absolute;
				top: max((-18vw / 7.5), -16px);
				left: 0;
			}
		}
	}
}

.branch_area {
	background: url(../images/bg_green.png) repeat 0 0;
	display: flex;
	align-items: center;
	min-height: min((75vw / 7.5), 60px);
	height: 100%;
	padding: min((5vw / 7.5), 5px) min((10vw / 7.5), 10px) min((5vw / 7.5), 5px) min((70vw / 7.5), 48px);
	border-top: 1px solid #c1c1c1;
	border-bottom: 1px solid #c1c1c1;
	position: relative;
	color: #fff;
	font-size: min((26vw / 7.5), 16px);
	font-weight: bold;
	margin-top: 10px;
	&::before {
    content: "";
    width: min((26vw / 7.5), 20px);
    height: min((40vw / 7.5), 32px);
    background: url(../images/iconArea03.png) no-repeat 0 0 / contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    margin: auto 0;
	}
}
@media (width <581px) {
	.branch_area::after {
		content: "";
		width: 17px;
		height: 17px;
		background: url(../images/icon_plus.png) no-repeat 0 0;
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(10.5rem / 12);
		margin: auto 0;
	}
	.branch_area.active::after {
		background-image: url(../images/icon_minus.png);
	}
}

.branch__list {
	display: grid;
	grid-template-columns: 50% 50%;
	@media (width <581px) {
		display: none;
		grid-template-columns: 1fr;
		border: 1px solid #50a13e;
    border-top: none;
    border-bottom: none;
	}
}
.branch__list--item {
	border-bottom: 1px solid #50a13e;
	
	@media (width >=580px) {
		border-bottom: 1px solid #bfbfbf;
	}
}
.branch__list--item:last-child, .branch__list--item:nth-child(odd):nth-last-child(2) {
	@media (width >=580px) {
		border-bottom: none;
	}
}
.reception_cal {
	display: flex;
	align-items: center;
	color: #333;
	font-size: min((24vw / 7.5), 16px);
	min-height: min((75vw / 7.5), 60px) !important;
	height: 100%;
	padding: min((5vw / 7.5), 5px) min((48vw / 7.5), 48px) !important;
	position: relative;
	&::after {
		content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: min((10vw / 7.5), 7px) 0 min((10vw / 7.5), 7px) min((12vw / 7.5), 9px);
    border-color: transparent transparent transparent #50a13e;
    position: absolute;
    top: 0;
    bottom: 0;
    right: min((25vw / 7.5), 25px);
    margin: auto 0;
	}
}

/*------------------------------------------------*/
/*★ hover ★*/

@media (hover : hover) and (pointer : fine) {
	.branch__nav--item--link {
		&:hover {
			text-decoration: none;
		}
	}
	.reception_cal {
		&:hover {
			background-color: #fffcdb;
		}
	}
}