@charset "utf-8";

/*----------------------------------------------------
 全体
----------------------------------------------------*/
body {
	font-family: Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
	font-size: var(--16px);
	line-height: 1.45;
	color: var(--text-color);
	letter-spacing: 0.05em;
	background-color: var(--color-white);
}

a {
	transition: 0.3s;
	text-decoration: none;
	color: var(--link-color);
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

ul,
dl,
ol {
  text-indent: 0;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

small {
	font-size: 75%;
}

strong {
	font-weight: 700;
}

/*----------------------------------------------------
 common
----------------------------------------------------*/
.sp {
	display: block;
}

.pc {
	display: none !important;
}

.txtLink {
	text-decoration: underline;
	text-decoration-color: var(--link-color);
	text-underline-offset:var(--03px);
}
	.txtLink:hover {
		text-decoration-color: var(--link-hover-color);
	}

.txtCenter {
	text-align: center;
}

.txtRight {
	text-align: right;
}

.red {
	color: var(--color-red);
}

.green {
	color: var(--color-dark-green);
}

.font80 {
	font-size: 80%;
}

.font90 {
	font-size: 90%;
}

.font120 {
	font-size: 120%;
}

.font140 {
	font-size: 140%;
}

.font200 {
	font-size: 200%;
}

.photoCenter {
	margin-left: auto;
	margin-right: auto;
}

.marker {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #FFED66 50% 100%);
}

/*----------------------------------------------------
 margin
----------------------------------------------------*/
.mb3 {
	margin-bottom: var(--03px);
}
.mb5 {
	margin-bottom: var(--05px);
}
.mb10 {
	margin-bottom: var(--10px);
}
.mb15 {
	margin-bottom: var(--15px);
}
.mb20 {
	margin-bottom: var(--20px);
}
.mb30 {
	margin-bottom: var(--30px);
}
.mb40 {
	margin-bottom: var(--40px);
}
.mb50 {
	margin-bottom: var(--50px);
}
.mb100 {
	margin-bottom: var(--100px);
}

.mt3 {
	margin-top: var(--03px);
}
.mt5 {
	margin-top: var(--05px);
}
.mt10 {
	margin-top: var(--10px);
}
.mt20 {
	margin-top: var(--20px);
}
.mt30 {
	margin-top: var(--30px);
}
.mt40 {
	margin-top: var(--40px);
}
.mt50 {
	margin-top: var(--50px);
}
.mt100 {
	margin-top: var(--100px);
}

/*----------------------------------------------------
 wrapper
----------------------------------------------------*/
.wrapper {
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}

/*----------------------------------------------------
 title
----------------------------------------------------*/
.secTitle {
	font-size: 5vw;
	font-weight: 600;
	text-align: center;
	margin-bottom: var(--20px);
}
	.secTitle strong {
		font-size: 8vw;
	}

/*----------------------------------------------------
 code_inq
----------------------------------------------------*/
.code_inq {
	display: none;
}

/*----------------------------------------------------
 header
----------------------------------------------------*/
#head {
	width: 100%;
	padding: 3%;
	background-color: var(--color-green);
}
	#head .inner {
		padding: var(--08px) var(--10px) var(--08px) var(--20px);
		border-radius: var(--50px);
		background-color: var(--color-white);
		box-shadow: 0px 0 6px 0 rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#head .logo img {
		width: auto;
		height: 36px;
	}
	#head .btn {
	}
		#head .btn a {
			display: block;
			border-radius: var(--30px);
			background-color: var(--color-yellow);
			color: var(--text-color);
			font-size: 3.5vw;
			font-weight: 600;
			line-height: 1.1;
			letter-spacing: 0;
			padding: var(--10px) var(--18px) var(--08px) var(--45px);
			background-image: url("../img/icon_web.svg");
			background-repeat: no-repeat;
			background-position: left 16px center;
		}

/*----------------------------------------------------
 main
----------------------------------------------------*/
main {
}

/*----------------------------------------------------
 mv
----------------------------------------------------*/
.mv {
	padding-bottom: var(--30px);
	background-color: var(--color-green);
	background-image: url(../img/bg_logo.svg);
	background-size: 90% auto;
	background-repeat: no-repeat;
	background-position: top 60px center;
}
	.mv .wrapper {
	}
	.mv .leftBox {
		width: 100%;
		margin-bottom: var(--20px);
	}
		.mv .leftBox .title {
			font-size: 10vw;
			color: var(--color-white);
			text-align: center;
			line-height: 1.2;
			margin-bottom: var(--10px);
		}
		.mv .leftBox .flexBox {
			display: flex;
			align-items: center;
			gap: var(--15px);
		}
			.mv .leftBox .flexBox figure {
				width: 62%;
				padding-left: var(--15px);
			}
			.mv .leftBox .flexBox .medal {
				width: calc(38% - 15px);
			}
				.mv .leftBox .flexBox .medal dt {
					width: 90px;
					margin: 0 auto;
				}
				.mv .leftBox .flexBox .medal dd {
					margin-top: -10px;
					background-color: var(--color-white);
					border-radius: var(--10px);
					padding: var(--10px) var(--12px);
					font-size: 2.5vw;
					font-weight: 500;
					line-height: 1.3;
				}
	.mv .rightBox {
		width: 100%;
		border-radius: var(--26px);
		border: 8px solid var(--color-dark-green);
		background-color: var(--color-white);
	}
		.mv .rightBox iframe {
			width: 100%;
		}

/*----------------------------------------------------
 scrollInfinity
----------------------------------------------------*/
.scrollInfinity {
  width: 100%;
  overflow: hidden;
	padding: var(--10px) 0;
}
	.scrollInfinity .logo img {
		width: auto;
		height: 44px;
	}
	.scrollInfinity .txt {
		font-size: var(--30px);
		font-weight: 700;
	}
		.scrollInfinity .txt strong {
			font-size: var(--50px);
		}
		.scrollInfinity .txt .oku {
			font-size: var(--35px);
		}

	/* アニメーション設定 */
	:root {
		--marquee-item-width: 1080px;
		--marquee-item-height: 60px;
	}
	.marquee {
		margin-inline: auto;
		position: relative;
		height: var(--marquee-item-height);
		overflow: hidden;
	}
	.marquee__item {
		display: flex;
		align-items: center;
		gap: var(--10px);
		width: var(--marquee-item-width);
		height: 100%;
		position: absolute;
		left: max(calc(var(--marquee-item-width) * var(--marquee-number-of-items)), 100%);
		animation: marquee-scroll var(--marquee-animation-speed) linear infinite;
		animation-delay: calc(var(--marquee-animation-speed) / var(--marquee-number-of-items) * var(--marquee-position) * -1);
	}
	@keyframes marquee-scroll {
		to {
				left: calc(var(--marquee-item-width) * -1);
		}
	}

/*----------------------------------------------------
 intro
----------------------------------------------------*/
.intro {
	padding: var(--30px) 0;
	background: url(../img/bg_green.png);
	background-size: 20px 20px;
}
	.intro .box {
		border-radius: var(--12px);
		border: 8px solid var(--color-dark-green);
		padding: 6% 4% 2% 4%;
		background-color: var(--color-white);
		background-image: linear-gradient(45deg, var(--color-dark-green) 20px, transparent 0),
											linear-gradient(-45deg, var(--color-dark-green) 20px, transparent 0),
											linear-gradient(135deg, var(--color-dark-green) 20px, transparent 0),
											linear-gradient(-135deg, var(--color-dark-green) 20px, transparent 0);
	}
		.intro .box .flexBox {
			font-weight: 600;
		}
			.intro .box .flexBox .leftBox {
				font-size: 5.2vw;
				display: flex;
				flex-direction: column;
				text-align: center;
			}
				.intro .box .flexBox .leftBox .text {
					order: 2;
					font-size: 5.2vw;
					line-height: 1.7;
					margin-bottom: var(--08px);
				}
				.intro .box .flexBox .leftBox strong span {
					font-size: 6.5vw;
					position: relative; /* 基準値とする */
				}
					.intro .box .flexBox .leftBox strong span::before {
						content: "・";       /* 文字の上に置くものを指定 */
						position: absolute; /* 相対位置とする */
						top: -1.1em;          /* 縦方向の表示位置を調整（-1emくらいがちょうどいいかんじ） */
						left: 0;            /* 横方向の表示位置を調整 */
						font-size: var(--20px);
						letter-spacing: -5px;
					}
				.intro .box .flexBox .leftBox .bg {
					order: 1;
					font-size: 5vw;
					background-color: var(--color-green);
					color: var(--color-white);
					padding: var(--08px) var(--20px);
					border-radius: var(--30px);
					margin-bottom: var(--05px);
				}
			.intro .box .flexBox .rightBox {
				width: 100%;
				margin-bottom: var(--10px);
			}
				.intro .box .flexBox .rightBox .bg {
					background-color: var(--color-yellow);
					font-size: var(--18px);
					text-align: center;
					padding: var(--04px) 0;
					margin-bottom: var(--05px);
				}
					.intro .box .flexBox .rightBox .bg strong {
						font-size: var(--26px);
					}
				.intro .box .flexBox .rightBox .num {
					font-size: 12vw;
					line-height: 1;
					text-align: center;
				}
					.intro .box .flexBox .rightBox .num strong  {
						font-size: 20vw;
					}

/*----------------------------------------------------
 feature
----------------------------------------------------*/
.feature {
	background-color: var(--bg-color-glay);
	padding: var(--30px) 0;
}
	.feature .list {
	}
		.feature .list li {
			padding: var(--20px);
			margin-bottom: var(--20px);
			border-radius: var(--20px);
			background-color: var(--color-yellow);
			overflow: hidden;
		}
			.feature .list li figure {
				margin-right: var(--20px);
				float: left;
			}
				.feature .list li figure img {
					height: 90px;
				}
			.feature .list li h3 {
				font-size: 6.5vw;
				margin-bottom: var(--08px);
			}
	.feature .examination {
		padding: var(--20px);
		border-radius: var(--20px);
		background-color: var(--color-yellow);
		display: flex;
		align-items: center;
		gap: var(--20px);
	}
		.feature .examination figure {
			width: 100px;
		}
		.feature .examination div {
			width: calc(100% - 120px);
		}
		.feature .examination h3 {
			font-size: 6.5vw;
			line-height: 1.3;
			margin-bottom: var(--08px);
		}
			.feature .examination h3 strong {
				font-size: 7.5vw;
			}

/*----------------------------------------------------
 refinance
----------------------------------------------------*/
.refinance {
	padding: var(--30px) 0;
}
	.refinance .balloon {
		font-size: 4.2vw;
		font-weight: 600;
		background-color: var(--color-green);
		color: var(--color-white);
		text-align: center;
		width: 100%;
		padding: var(--08px) 0;
		border-radius: var(--30px);
		display: inline-block;
		margin-bottom: var(--20px);
		position: relative;
	}
		.refinance .balloon::after {
			content: "";
			position: absolute;
			height: 12px;
			width: 12px;
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			background-color: var(--color-green);
			left: calc(50% - 6px);
			bottom: -11px;
		}
	.refinance	p.txtCenter.mb30 {
		text-align: left;
		line-height: 1.7;
	}
	.refinance .borderTitle {
		border: 1px solid var(--color-glay);
		text-align: center;
		padding: var(--05px) 0;
		margin-bottom: var(--20px);
	}
	.refinance .markerText {
		display: inline-block;
		font-size: 6.2vw;
		font-weight: 600;
		line-height: 1;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, #FFED66 60% 100%);
	}
		.refinance .markerText span {
			font-weight: 600;
		}
		.refinance .markerText strong {
			font-size: 11vw;
		}
	.refinance .box {
		padding: 5%;
		border-radius: var(--20px);
		background-color: var(--color-yellow);
		margin-bottom: var(--10px);
	}
		.refinance .box h3 {
			text-align: center;
			font-size: var(--20px);
			margin-bottom: var(--30px);
		}
			.refinance .box h3 span {
				font-size: var(--30px);
			}
			.refinance .box h3 strong {
				font-size: var(--40px);
			}
		.refinance .box .list {
			counter-reset: my-counter;
		}
			.refinance .box .list li {
				background-color: var(--color-white);
				border-radius: var(--15px);
				padding: var(--30px) var(--15px) var(--15px) var(--15px);
				margin-bottom: var(--30px);
  			position: relative;
			}
				.refinance .box .list li:last-child {
					margin-bottom: 0;
				}
				.refinance .box .list li:before {
					content: counter(my-counter);
					counter-increment: my-counter;
					background-color: var(--text-color);
					border-radius: 50%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 42px;
					width: 42px;
					color: var(--color-white);
					font-size: var(--30px);
					font-weight: 600;
					line-height: 1;
					position: absolute;
					top: -21px;
					left: calc(50% - 21px);
				}
				.refinance .box .list li h4 {
					text-align: center;
					font-size: var(--20px);
					margin-bottom: var(--10px);
				}

/*----------------------------------------------------
 invoice-pay2
----------------------------------------------------*/
.invoice-pay2 {
	padding: var(--30px) 0;
	background: url(../img/bg_blue.png);
	background-size: 20px 20px;
}
	.invoice-pay2 .wrapper {
	}
		.invoice-pay2 .wrapper h2 {
			color: var(--color-white);
			font-size: 6vw;
			text-align: center;
			margin-bottom: var(--15px);
		}
		.invoice-pay2 .wrapper .btn a {
			display: flex;
			align-items: center;
			gap: var(--15px);
			padding: var(--10px) var(--60px) var(--10px) var(--15px);
			background-color: var(--color-white);
			border-radius: var(--15px);
			color: var(--text-color);
			position: relative;
		}
			.invoice-pay2 .wrapper .btn img {
				width: 30%;
			}
			.invoice-pay2 .wrapper .btn a:hover {
				color: var(--color-red);
			}
			.invoice-pay2 .wrapper .btn a::before {
				content: '';
				width: 32px;
				height: 32px;
				background-color: var(--color-blue);
				border-radius: 50%;
				position: absolute;
				top: 50%;
				right: 15px;
				margin-top: -16px;
			}
			.invoice-pay2 .wrapper .btn a::after {
				content: '';
				width: 10px;
				height: 10px;
				border: 0;
				border-top: solid 3px var(--color-white);
				border-right: solid 3px var(--color-white);
				position: absolute;
				top: 50%;
				right: 28px;
				margin-top: -5px;
				transform: rotate(45deg);
			}
			.invoice-pay2 .wrapper .btn a p {
				font-size: 5.5vw;
				font-weight: 700;
				line-height: 1.3;
			}

/*----------------------------------------------------
 security
----------------------------------------------------*/
.security {
	background-color: var(--bg-color-glay);
	padding: var(--30px) 0;
}
	.security .blueTitle {
		color: var(--color-blue);
		font-size: 6.5vw;
		text-align: center;
		margin-bottom: var(--15px);
	}
	.security .list {
		margin-bottom: var(--15px);
	}
		.security .list li {
			border: 2px solid var(--color-blue);
			margin-bottom: var(--15px);
		}
			.security .list li dl {
				display: flex;
			}
				.security .list li dl dt {
					width: var(--100px);
					padding-top: var(--15px);
					background-color: var(--color-blue);
				}
					.security .list li dl dt img {
						margin: 0 auto;
						width: auto;
						height: 60px;
					}
				.security .list li dl dd {
					width: calc(100% - 80px);
					padding: var(--10px) var(--15px);
					background-color: var(--color-white);
				}
	.security .notice {
		float: right;
		font-size: var(--12px);
	}
		.security .cloudsign {
			clear: both;
		}
			.security .cloudsign .medal {
				width: 140px;
				z-index: 1;
				margin: 0 auto;
			}
			.security .cloudsign .bg {
				margin-top: -14px;
				padding: var(--20px);
				background-color: var(--color-white);
				border-radius: var(--15px);
			}
				.security .cloudsign .bg figure {
					display: flex;
					align-items: center;
					gap: var(--20px);
				}
					.security .cloudsign .bg figure img {
						width: 60px;
					}

/*----------------------------------------------------
 difference
----------------------------------------------------*/
.difference {
	padding-bottom: var(--50px);
}
	.difference video {
		width: 200px;
	}
	.difference .flexBox {
		margin-bottom: var(--10px);
	}
		.difference .flexBox div {
			border-radius: var(--20px);
		}
			.difference .flexBox div img {
				width: 80%;
			}
		.difference .flexBox .leftBox {
			border: 12px solid var(--color-yellow);
			margin-bottom: var(--30px);
		}
			.difference .flexBox .leftBox h3 {
				background-color: var(--color-yellow);
				padding-bottom: var(--10px);
			}
		.difference .flexBox .rightBox {
			border: 12px solid #555555;
		}
			.difference .flexBox .rightBox h3 {
				text-align: center;
				font-size: 5vw;
				background-color: #555555;
				color: var(--color-white);
				padding-bottom: var(--10px);
			}
		.difference .flexBox .subTitle {
			font-size: 5vw;
			font-weight: 600;
			line-height: 1.3;
			text-align: center;
		}
			.difference .flexBox .subTitle strong {
				font-size: 7vw;
			}
	.difference ol {
		counter-reset: my-counter;
	}
		.difference ol li {
			border-top: 2px dotted var(--color-glay);
			padding: var(--10px) var(--15px) var(--10px) 55px;
			font-size: var(--18px);
			position: relative;
		}
				.difference ol li:before {
					content: counter(my-counter);
					counter-increment: my-counter;
					background-color: var(--text-color);
					border-radius: 50%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 30px;
					width: 30px;
					color: var(--color-white);
					font-size: var(--20px);
					line-height: 1;
					position: absolute;
					top: calc(50% - 15px);
					left: var(--10px);
				}
	.difference .arrowStaff {
		display: flex;
		align-items: center;
		justify-content: center;
	}
		.difference .arrowStaff .arrow {
			width: 240px;
			margin: 0 auto 20px;
			padding-top: var(--10px);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--20px);
			font-weight: 600;
			position: relative;
		}
			.difference .arrowStaff .arrow::after {
				content: "";
				position: absolute;
				width: 240px;
				height: 70px;
				clip-path: polygon(50% 100%, 0 0, 100% 0);
				background-color: #EBEBEB;
				left: 0;
				top: 0;
				z-index: -1;
			}
		.difference .arrowStaff figure {
			width: calc(100% - 260px);
			z-index: -1;
		}
	.difference .staff {
		margin: -10px auto 0;
	}
		.difference .staff .bg {
			padding: 3%;
			border: 6px solid var(--color-dark-green);
			background-color: var(--color-white);
			border-radius: var(--15px);
			font-size: 4.2vw;
			font-weight: 600;
			line-height: 1.6;
		}
			.difference .staff .bg strong {
				font-size: 5.5vw;
			}
			.difference .staff .bg .box {
				border: 1px solid var(--text-color);
				padding: var(--03px) var(--06px);
				font-size: 5.8vw;
				color: var(--color-red);
				margin-right: var(--05px);
			}

/*----------------------------------------------------
 featurePay
----------------------------------------------------*/
.featurePay {
	background-color: var(--bg-color-glay);
	padding: var(--30px) 0;
}
	.featurePay .exclamation {
		display: inline-block;
		font-size: 5.2vw;
		font-weight: 600;
		text-align: left;
		position: relative;
		padding-left: 65px;
	}
		.featurePay .exclamation::before {
			content: url(../img/icon_exclamation.svg);
			position: absolute;
			left: 0;
			top: 20%;
		}

/*----------------------------------------------------
 faq
----------------------------------------------------*/
.faq {
	padding: var(--30px) 0;
}
	.faq .subTitle {
		font-size: 6vw;
		padding-left: var(--15px);
		border-left: 10px solid var(--color-green);
		margin-top: var(--30px);
		margin-bottom: var(--20px);
	}
	.faq .open dd {
			margin-top: var(--15px);
			padding: var(--20px) var(--20px) 0 var(--60px);
	}
	.faq dl {
		border: 3px solid var(--color-green);
		border-radius: var(--20px);
		padding: var(--15px);
		margin-bottom: var(--20px);
	}
	.faq dt {
		padding-left: var(--50px);
		padding-right: var(--30px);
		font-size: 4.5vw;
		font-weight: 600;
		position: relative;
	}
		.faq dt::before {
			content: "Q";
			color: var(--color-white);
			font-size: var(--22px);
			font-weight: 300;
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
			background-color: var(--color-green);
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 0;
			margin-top: -20px;
		}
	.faq dd {
		padding: 0 var(--20px) 0 var(--60px);
		border-top: 2px dashed #C7C7C7;
		position: relative;
	}
		.faq dd.is-open {
			margin-top: var(--26px);
			padding: var(--20px) var(--20px) 0 var(--60px);
		}
		.faq dd::before {
			content: "A";
			color: var(--color-green);
			font-size: var(--22px);
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
			background-color: var(--color-white);
			border: 1px solid var(--color-green);
			border-radius: 50%;
			position: absolute;
			top: var(--20px);
			left: 0;
		}

/* アコーディオンボタン */
.accordion__title {
	position: relative;
	cursor: pointer;
	user-select: none;
}

/* アコーディオン展開時のアイコン */
.accordion__title::after {
	content: "";
	position: absolute;
	right: 0;
	top: calc(50% - 2px);
	transition: all 0.2s ease-in-out;
	display: block;
	width: 12px;
	height: 12px;
	border-top: solid 4px var(--color-green);
	border-right: solid 4px var(--color-green);
	transform: translateY(-50%) rotate(135deg);
}
	.accordion__title.is-active::after {
		transform: translateY(-50%) rotate(315deg);
	}

/* アコーディオンの中身 */
.accordion__content {
	line-height: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition-duration: .3s;
}
	.accordion__content.is-open {
		line-height: 1.45;
		height: auto;
		min-height: var(--70px);
		opacity: 1;
	}

/*----------------------------------------------------
 company
----------------------------------------------------*/
.company {
	background-color: var(--bg-color-glay);
	background-image: url(../img/company_bg.svg);
	background-repeat: no-repeat;
	background-position: top 150px center;
	background-size: 110% auto;
	padding: var(--30px) 0 var(--10px);
}
	.company .flexBox {
		margin-bottom: var(--30px);
	}
		.company .flexBox .leftBox {
			margin-bottom: var(--30px);
		}
			.companyInfo {
				border-top: 1px solid var(--color-black);
			}
				.companyInfo,.companyInfo td,.companyInfo th {
					border-collapse: collapse;
					border-bottom: 1px solid var(--color-black);
				}
				.companyInfo td,.companyInfo th {
					padding: var(--20px) var(--10px);
				}
				.companyInfo th {
					width: 30%;
					text-align: left;
				}
			.company .flexBox .leftBox .img_mail {
				display: inline;
				height: var(--16px);
			}
		.company .flexBox iframe {
			border-radius: var(--20px);
			width: 100%;
			height: 400px;
		}
	.company .certificate {
		width: 80%;
		margin: 0 auto;
	}
		.company .certificate dl {
			margin-bottom: var(--30px);
		}
			.company .certificate dl dt {
				margin-bottom: var(--10px);
				display: flex;
				gap: var(--03px);
			}
			.company .certificate dl dt figure {
				width: calc((100%- 5px) / 2);
			}
	.company .btnOfficial a {
		display: inline-block;
		background-color: var(--color-white);
		border-radius: var(--30px);
		padding: var(--05px) var(--30px) var(--05px) var(--20px);
		font-size: var(--14px);
		color: var(--text-color);
		position: relative;
	}
		.company .btnOfficial a::after {
			content: '';
			width: 8px;
			height: 8px;
			border: 0;
			border-top: solid 2px var(--text-color);
			border-right: solid 2px var(--text-color);
			position: absolute;
			top: 50%;
			right: 15px;
			margin-top: -4px;
			transform: rotate(45deg);
		}

/*----------------------------------------------------
 ssl
----------------------------------------------------*/
.ssl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 4%;
	padding: 1rem 0;
}
.ssl .box_sticker {
	width: 128px;
}
	.ssl .box_sticker .sticker_sec_ssl {
		display: block;
		width: 128px;
	}
.ssl .txt {
	width: calc(100% - 152px);
}

/*----------------------------------------------------
 footer
----------------------------------------------------*/
#foot {
	background-color: var(--text-color);
	padding: var(--20px) 0 110px;
	font-size: var(--14px);
}
	#foot .wrapper {
		text-align: center;
	}
		#foot .wrapper .policy a {
			color: var(--color-white);
			position: relative;
			padding-left: var(--15px);
		}
			#foot .wrapper .policy a::before {
				content: '';
				width: 6px;
				height: 6px;
				border: 0;
				border-top: solid 2px var(--color-white);
				border-right: solid 2px var(--color-white);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -3px;
				transform: rotate(45deg);
			}
			#foot .wrapper .policy a:hover {
				color: var(--color-green);
			}
		#foot .wrapper .copy {
			margin-top: var(--05px);
			color: var(--color-white);
		}

/*----------------------------------------------------
 footerFixed
----------------------------------------------------*/
.footerFixed {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	background-color: var(--color-green);
	padding: var(--10px) var(--12px);
  transform: translateY(100%); /* 最初は下に隠す */
  transition: transform 0.3s ease-in-out; /* スムーズな動き */
}
	/* 表示状態 */
	.footerFixed.is-visible {
		transform: translateY(0); /* 下から表示 */
	}
	.footerFixed .inner {
	}
		.footerFixed .inner h2 {
			color: var(--color-white);
			font-size: 4vw;
			text-align: center;
			margin-bottom: var(--05px);
		}
		.footerFixed .inner .btn {
			display: flex;
			align-items: center;
			gap: var(--10px);
		}
			.footerFixed .inner .btn li {
				width: calc((100% - 20px) / 3);
			}
				.footerFixed .inner .btn li a {
					display: block;
					width: 100%;
					border-radius: var(--30px);
					padding: var(--10px) var(--10px) var(--10px) var(--45px);
					background-color: var(--color-white);
					font-size: 3.9vw;
					font-weight: 600;
					color: var(--text-color);
					background-repeat: no-repeat;
					background-position: left 15px center;
				}
					.footerFixed .inner .btn li.tel a {
						background-color: var(--color-yellow);
						background-image: url("../img/icon_tel.svg");
					}
					.footerFixed .inner .btn li.line a {
						background-image: url("../img/icon_line.svg");
					}
					.footerFixed .inner .btn li.web a {
						background-image: url("../img/icon_web.svg");
					}