@charset "UTF-8";
* {
	margin: 0;
	padding: 0
}
body, input, textarea {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 16px;
	color: #1a1a1a;
	line-height: 1.6em;
	background: #fff;
	word-break: break-all
}
a:link, a:visited {
	color: #fff!important;
	text-decoration: none
}
a:hover, a:active {
	text-decoration: none
}
a img {
	border: none
}
a:hover img {
	opacity: .6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )"
}
a:link, a:visited img {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )"
}
a:hover {
	opacity: .6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s
}
body {
	-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
	animation: fadeIn 1.5s ease 0s 1 normal
}
.fadein {
	opacity: 1;
	transform: translate(0, 0)
}
.fadein.animation-ready {
	opacity: .1;
	transform: translate(0, 50px);
	transition: all 500ms
}
.fadein.animation-ready.scrollin {
	opacity: 1;
	transform: translate(0, 0)
}
@keyframes fadeIn {
	0% {
		opacity: .01
	}
	100% {
		opacity: 1
	}
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: .01
	}
	100% {
		opacity: 1
	}
}
@media (prefers-reduced-motion:no-preference) {
	.fadein.animation-ready {
		opacity: .1;
		transform: translate(0, 50px);
		transition: all 500ms
	}
	.fadein.animation-ready.scrollin {
		opacity: 1;
		transform: translate(0, 0)
	}
}
.pc {
	display: block!important
}
.tb {
	display: none!important
}
.sp {
	display: none!important
}
.wrap {
	padding: 80px 0;
	width: 100%;
	height: auto;
	margin: 0 auto;
	background: #fff;
	position: relative
}
.wrap_inner {
	width: 1000px;
	margin: 0 auto;
	height: auto;
	padding: 0
}
.btn .wrap_inner {
	max-width: 1000px;
	width: 80%
}
h1 {
	margin: 0 auto
}
h2 {
	text-align: center;
	font-size: 49px;
	line-height: 1.3em;
	font-weight: 700;
	margin: 0 auto 50px;
	position: relative;
	padding: .5rem 0 2rem
}
h2 span {
	color: var(--ttlColor);
	font-size: 22px
}
h3 {
	font-size: 25px;
	color: #222;
	margin: 30px auto 10px;
	text-align: left
}
.br-pc {
	display: block
}
.br-sp {
	display: none
}
.midashi {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 9000!important
}
.wrapper {
	overflow: hidden
}
.sp-br {
	display: none
}
span.uLine {
	background: linear-gradient(transparent 60%, #fff899 30%);
	display: inline-block
}
.floatLeft {
	float: left
}
.floatRight {
	float: right
}
.anchor {
	padding-top: 180px;
	margin-top: 180px
}
.is-hidden {
	visibility: hidden;
	opacity: 0
}
header {
	width: 100%;
	height: auto;
	background: #fff;
	top: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 9999
}
.headerWrap {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0
}
.headerWrap .h-logo {
	display: inline-block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 auto
}
.headerWrap .h-logo img {
	width: 230px;
	height: auto;
	margin: 0 0 0 15px
}
.headerWrap a.dlBtn {
	width: 225px;
	height: 78px;
	color: #fff;
	background: var(--graOrangeColor);
	font-size: 20px;
	display: block;
	text-align: center;
	line-height: 3.8em
}
.headerWrap a.hCtnBtn {
	width: 225px;
	height: 78px;
	color: #fff;
	background: var(--graBlueColor);
	font-size: 20px;
	display: block;
	text-align: center;
	line-height: 3.8em
}
.headerWrap p {
	margin: 14px 20px 0 0;
	text-align: right
}
.headerWrap p a {
	color: #1a1a1a!important;
	font-weight: 700;
	font-size: 24px
}
#header {
	background: #fff;
	width: 100%;
	height: 78px;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 2
}
#menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	background: #fff;
	width: 100%
}
#menu.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5
}
.f-menu {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0 0 0;
	float: left
}
.f-menu img {
	width: 150px;
	height: auto;
	margin: 17px 20px 0 17px
}
.f-menu li {
	margin: .2em
}
.f-menu li a {
	display: block;
	padding: 20px 10px;
	color: #1a1a1a!important;
	text-decoration: none;
	margin-top: 3px;
	font-size: 14px
}
.f-menu li:first-child {
	margin-right: auto
}
.f-menu li:first-child a {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 0
}
#menu .tel {
	margin: 14px 20px 0 0;
	text-align: right;
	font-size: 14px!important
}
#menu .tel a {
	color: #1a1a1a!important;
	font-weight: 700;
	font-size: 20px
}
.headerWrap #menu a.dlBtn {
	width: 148px;
	height: 75px;
	color: #fff;
	background: var(--graOrangeColor);
	font-size: 18px;
	display: block;
	text-align: center;
	line-height: 1.6em;
	font-size: 14px;
	padding-top: 13px
}
.headerWrap #menu a.hCtnBtn {
	width: 148px;
	height: 75px;
	color: #fff;
	background: var(--graBlueColor);
	font-size: 18px;
	display: block;
	text-align: center;
	line-height: 1.6em;
	font-size: 14px;
	padding-top: 13px
}
@media only screen and (min-width:768px) and (max-width:860px) {
	.headerWrap a.hCtnBtn, .headerWrap a.dlBtn {
		width: 200px
	}
}
.fv {
	width: 100%;
	height: auto;
	background: linear-gradient(to right, #fff, var(--middleColor));
	padding: 0
}
.fvWrap {
	width: 100%;
	max-width: 1150px;
	padding: 0;
	margin: 0 auto
}
.fvWrap .floatLeft {
	width: 60%
}
.fvWrap p.upperCatchcopy {
	font-size: clamp(22px, calc(100vw* 22 / 769), 32px);
	font-weight: 700;
	margin: 10px 0 .5em
}
.fvWrap .catchcopy {
	font-size: clamp(44px, calc(100vw * 44 / 769), 66px);
	font-weight: 900;
	margin: 0;
	line-height: 1.3em
}
.fvWrap .catchcopy span.thinTxt {
	font-size: .8em;
	font-weight: 300
}
.fvWrap .catchcopy span.blueBack {
	background: var(--deepColor);
	color: #fff
}
.fvWrap p.subCatchcopy {
	font-size: clamp(18px, calc(100vw * 18 / 769), 26px);
	font-weight: 700;
	margin: 10px 0 0 0;
	line-height: 1.5em
}
.fvWrap .subCatchcopy span.underline {
	font-size: 1.1em;
	font-weight: 900;
	color: var(--deepColor);
	background: linear-gradient(transparent 60%, var(--yellowColor) 30%);
	display: inline-block
}
.fvWrap p {
	font-size: clamp(14px, calc(100vw * 14 / 769), 22px);
	margin: 20px 0 0 0;
	line-height: 1.5em
}
.fvWrap img {
	width: 100%;
	height: auto
}
@media screen and (min-width:769px) {
	.fvWrap {
		height: min(52vw, 522px)
	}
	.fvWrap .floatLeft {
		margin-top: 50px
	}
	.fvWrap .imageBox {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 auto;
		width: 40%;
		float: right
	}
}
.sliderspace {
	background: #f6f6f6
}
.sliderspace h2 {
	font-size: 28px;
	margin-bottom: 20px
}
.sliderArea {
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin: 0 auto
}
.slider {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative
}
.slider img {
	width: 100%;
	height: auto;
	opacity: .3
}
.slick__item.slick-center img {
	opacity: 1
}
.slick-prev {
	left: 8%;
	z-index: 1
}
.slick-next {
	right: 10%;
	z-index: 1
}
.slick-prev:before, .slick-next:before {
	font-family: 'slick';
	font-size: 45px;
	line-height: .6;
	opacity: 1;
	color: #666;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.slick-dots {
	bottom: -60px
}
.slick-dots li {
	width: 35px;
	height: 2px;
	margin: 0 3px;
	background: #ccc
}
.slick-dots li button {
	width: auto;
	height: auto;
	padding: 0
}
.slick-dots li button::before {
	display: none
}
.slick-dots li.slick-active::before {
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	background: #333;
	position: absolute;
	display: block;
	content: "";
	-webkit-animation: 5s linear 0s infinite alternate slide_meter;
	animation: 5s linear 0s infinite alternate slide_meter
}
.slick-dots li.slick-active.first::before {
	-webkit-animation: 4s linear 0s infinite alternate slide_meter;
	animation: 4s linear 0s infinite alternate slide_meter
}
@-webkit-keyframes slide_meter {
	from {
		width: 0
	}
	to {
		width: 100%
	}
}
@keyframes slide_meter {
	from {
		width: 0
	}
	to {
		width: 100%
	}
}
.modal-wrapper {
	z-index: 999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 40px 10px;
	text-align: center
}
.modal-button {
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	display: block;
	margin: 0 auto;
	padding: 0x;
	width: 100%;
	text-decoration: none
}
.modal-button:active {
	-webkit-transform: translateY(2px);
	transform: translateY(2px)
}
.modal-button:hover {
	color: #FFF;
	transition: .6s
}
.modal-wrapper:not(:target) {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s
}
.modal-wrapper:target {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s, visibility .4s
}
.modal-wrapper::after {
	display: inline-block;
	height: 100%;
	margin-left: -.05em;
	vertical-align: middle;
	content: ""
}
.modal-wrapper .modal-window {
	box-sizing: border-box;
	display: inline-block;
	z-index: 20;
	position: relative;
	width: 100%;
	max-width: 1200px;
	padding: 90px 0 0 0;
	box-shadow: 0 0 30px rgba(0, 0, 0, .6);
	vertical-align: middle
}
.modal-wrapper .modal-window .modal-content {
	max-height: 80vh;
	overflow-y: auto;
	text-align: left
}
.modal-overlay {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .8)
}
.modal-wrapper .modal-close {
	z-index: 20;
	position: absolute;
	top: 50px;
	right: 5px;
	width: 35px;
	color: #95979c!important;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	text-indent: 0
}
.modal-wrapper .modal-close:hover {
	color: #2b2e38!important
}
#splide li.splide__slide {
	width: 100%
}
#splide img {
	width: 100%;
	height: auto
}
.problem {
	background: var(--lightColor)
}
.problem h2 {
	color: var(--deepColor);
	padding: 10px;
	text-align: center;
	border-radius: 35px;
	margin: 0 auto 20px;
	font-weight: 700
}
.problem ul {
	width: 100%;
	margin: 0 auto;
	overflow: hidden
}
.problem ul li {
	list-style: none;
	width: 30%;
	height: auto;
	float: left;
	margin: 10px
}
.problem ul li h3 {
	font-size: 24px;
	text-align: center;
	line-height: 1.4em;
	margin-bottom: 20px
}
.problem ul li p {
	font-size: 17px;
	line-height: 1.4em
}
.problem ul li img {
	width: 100%;
	height: auto;
	margin: 0 auto
}
.arrow {
	background: var(--graOrangeColor);
	height: calc(tan(60deg) * 60px / 3);
	width: 300px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin: 30px auto;
	clear: both
}
.result {
	font-size: 34px;
	text-align: center;
	line-height: 1.6em;
	font-weight: 700
}
.solution {
	background: #fff;
	padding-top: 80px;
	margin-top: 0
}
/* .solution h2, .solution h2 span {
	font-size: 22px;
} */
.solution ul {
	width: 100%;
	margin: 0 auto
}
.solution ul li {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 auto 50px;
	background: #fff
}
.solution ul li .pho {
	width: 40%!important;
	height: auto;
	padding: 40px 30px!important;

}
.solution ul li .floatLeft {
	width: 60%;
	padding: 0 10px
}
.solution ul li .floatRight {
	width: 60%;
	padding: 0 10px
}
.solution ul li h3 {
	color: var(--deepColor);
	font-size: 30px;
	margin: 0 auto 20px;
	line-height: 1.8em;
	font-weight: 700
}
.solution ul li p {
	font-size: 18px;
	margin: 0 auto;
	line-height: 1.8em
}
.solution h2 {
	font-size: 45px
}
.solution .otherPoint {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 40px;
	background: var(--lightColor);
	border-radius: 20px
}
.solution .otherPoint table {
	font-size: 24px;
	font-weight: 700;
	table-layout: auto
}
.solution .otherPoint table th {
	width: 10%;
	padding: 15px 0;
	vertical-align: middle;
	line-height: 1.5em
}
.solution .otherPoint table td {
	width: 90%;
	padding: 15px 0;
	vertical-align: middle;
	line-height: 1.5em
}
.solution .otherPoint table th .fa-square-check {
	color: var(--redColor);
	font-size: 26px
}
.merit {
	background: var(--backColor)
}
.merit table {
	width: 100%;
	margin: 0 auto 50px
}
.merit table th {
	width: 30%
}
.merit table th img {
	width: 100%;
	height: auto
}
.merit table td {
	width: 70%;
	padding-left: 20px
}
.merit table td h2 {
	font-size: 35px;
	text-align: left;
	margin: 0 auto
}
.merit table td .intro {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.4em;
	margin: 0 auto 30px
}
.merit table td .intro span {
	color: var(--redColor)
}
.merit ul {
	width: 100%;
	margin: 0 auto
}
.merit ul li {
	list-style: none;
	width: 30%;
	height: 30rem;
	text-align: center;
	background: #fff;
	padding: 30px 20px;
	margin: 10px;
	border-radius: 20px;
	box-shadow: 0 0 8px #eee
}
.merit ul li h3 {
	text-align: center;
	color: var(--deepColor);
	font-size: 23px;
	line-height: 1.5em
}
.merit ul li img {
	width: 100px;
	height: auto
}
.merit ul li p {
	font-size: 15px;
	text-align: left
}
.reason {
	background: var(--lightColor)
}
.reason .addTxt {
	color: var(--ttlColor);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.5em!important;
	text-align: center
}
.reason ul li {
	list-style: none;
	width: 100%;
	height: auto;
	margin: 0 auto 30px;
	padding: 20px;
	background: #fff;
	position: relative
}
.reason ul li .num {
	background: var(--middleColor);
	color: #fff;
	width: 160px;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	padding-top: 50px;
	font-size: 26px;
	line-height: 2.3em;
	font-weight: 700;
	height: 100%
}
.reason ul li .num span {
	font-size: 90px
}
.reason ul li h3 {
	font-size: 22px;
	line-height: 1.5em;
	margin: 15px auto
}
.reason ul li .floatLeft {
	width: 450px;
	margin-left: 170px
}
.reason ul li .floatRight {
	width: 315px;
	height: auto
}
.reason ul li p {
	font-size: 15px;
	line-height: 1.6em
}
.use {
	background: none
}
.use.scrollin {
	background: url(../images/7-useBg.webp);
	background-size: cover;
	background-position: center
}
.use p {
	text-align: center;
	font-size: 30px;
	margin: 20px auto;
	color: #fff;
	line-height: 1.8em;
	font-weight: 700
}
.use p.genre {
	text-align: left;
	background: #fff;
	color: #1a1a1a;
	font-size: 20px;
	padding: 30px 50px;
	width: 80%;
	margin: 20px auto;
	font-weight: 300
}
.performance {
	background: var(--backColor);
	padding-top: 80px;
	margin-top: 0
}
.performance table {
	width: 100%;
	height: auto;
	padding: 30px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 0 8px #eee;
	margin: 0 auto 50px
}
.performance table th {
	width: 30%;
	vertical-align: middle
}
.performance table th img {
	width: 230px;
	height: auto
}
.performance table td {
	width: 700px;
	padding: 30px 30px 30px 0
}
.performance table td h3 {
	margin: 0 auto;
	text-align: center;
	line-height: 1.6em
}
.performance table td .name {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin: 30px auto
}
.performance table td .name span {
	font-size: 16px;
	margin-left: 15px
}
.performance table td p {
	line-height: 1.8em
}
@media screen and (min-width:769px) {
	#performance table.one-colmun th {
		width: 80%;
		display: block;
		margin: 20px auto
	}
	#performance table.one-colmun td {
		display: block;
		width: 100%;
		padding: 0 30px 30px
	}
}
.price_f table {
	width: 100%;
	margin: 0 auto;
	border-radius: 20px
}
.price_f table th {
	text-align: center;
	width: 33%;
	background: var(--backColor);
	vertical-align: top;
	padding: 10px 0 0
}
.price_f table th.osusume, .price_f table td.osusume {
	box-shadow: 5px 0 0 0 var(--redColor) inset, -5px 0 0 0 var(--redColor) inset;
	position: relative;
	background-color: var(--osusumeColor)
}
.price_f table th.osusume::before {
	content: '';
	width: 100%;
	height: 25px;
	position: absolute;
	background-color: var(--osusumeColor);
	left: 0;
	top: -25px;
	border: 5px solid var(--redColor);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom: none
}
.price_f table tr.end td.osusume::after {
	content: '';
	width: 100%;
	height: 20px;
	position: absolute;
	background-color: var(--osusumeColor);
	left: 0;
	bottom: -20px;
	border: 5px solid var(--redColor);
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top: none
}
.price_f table tr.end td {
	padding-bottom: 10px
}
.price_f table th.osusume .osusumeIcon {
	width: max-content;
	color: var(--redColor);
	font-size: 18px;
	font-weight: 700;
	padding: .3em 1em;
	background: #fff;
	border: 4px solid var(--redColor);
	border-radius: 100vh;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%)
}
.price_f table th h3 {
	color: var(--deepColor);
	font-size: 26px;
	text-align: center;
	line-height: 1.6em;
	margin-top: 0
}
.price_f table th p, .price_f table td p {
	font-size: 16px;
	line-height: 1.6em;
	padding: 0 6px;
	font-weight: 300
}
.price_f table th p span, .price_f table td p.price-txt {
	font-size: 35px;
	font-weight: 700;
	text-align: center
}
.price_f table th.osusume h3 {
	color: var(--deepColor);
	text-align: center;
	line-height: 1.6em;
	padding: 0 5px
}
.price_f table td.addTxt {
	background: #fff;
	font-size: 16px;
	padding: 30px 0 10px;
	text-align: center
}
.price_f table td.addOption {
	padding: 10px 2%;
}
.price_f table td {
	width: 33%;
	background: var(--backColor);
	vertical-align: top;
	padding: 5px 1%;
	line-height: 1.9em
}
.price_f table td span {
	font-size: 20spx;
	font-weight: 700
}
.price_f table th p.subtitle {
	font-size: .75em
}
.price_f table th p.hr {
	margin: 10px auto;
	width: 90%;
	border-top: 1px solid #C1C1C1
}
.price_s {
	background: var(--lightColor)
}
.price_s>.wrap_inner {
	width: 95%;
	max-width: 1000px
}
.priceTbl {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	max-width: 1000px;
	text-align: center
}
.priceTbl thead th {
	padding: 1em .8em;
	border-right: 1px solid #fff
}
.priceTbl td {
	padding: 1em;
	vertical-align: top
}
.priceTbl thead th:not(:first-child) {
	background: #6E6E6E;
	color: #fff;
	font-size: 20px;
	padding: 1em .5em
}
.priceTbl thead th span {
	font-size: .8rem
}
.priceTbl thead th:nth-child(2) {
	background-color: #fff;
	position: relative;
	border-left: 4px solid var(--redColor);
	border-right: 4px solid var(--redColor)
}
.priceTbl thead th:nth-child(2)::before {
	content: '';
	width: calc(100% + 8px);
	height: 15px;
	position: absolute;
	background-color: #fff;
	left: -4px;
	bottom: 100%;
	border: 4px solid var(--redColor);
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px
}
.priceTbl thead th:nth-child(2) p {
	display: none
}
.priceTbl tbody th, .priceTbl tbody td {
	border: 1px solid #b0b0b0
}
.priceTbl tbody th {
	background-color: var(--middleColor);
	color: #fff;
	vertical-align: middle;
	border-bottom: 1px solid #fff!important
}
.priceTbl tbody td {
	background-color: #fff
}
.priceTbl tbody td span {
	font-size: 24px;
	font-weight: 700;
	text-align: center
}
.priceTbl tbody td span.d_circle {
	color: var(--redColor);
	font-weight: 900
}
.priceTbl tbody td span.s_circle {
	color: var(--redColor);
	font-weight: 900
}
.priceTbl tbody td span.triangle {
	color: var(--deepColor);
	font-weight: 900
}
.priceTbl td:nth-child(2) {
	background: #fff;
	border-left: 4px solid var(--redColor);
	border-right: 4px solid var(--redColor)
}
.priceTbl tr.recommend th {
	vertical-align: middle;
	background: var(--middleColor)
}
.priceTbl tr.recommend td {
	vertical-align: middle;
	font-weight: 700
}
.priceTbl tr.recommend td.bBtm {
	border-bottom: 4px solid var(--redColor)!important;
	vertical-align: middle
}
.tblLogo {
	width: 100%;
	height: auto
}
.flow {
	background: var(--backColor);
	padding-top: 80px;
	margin-top: 0
}
.stepbar {
	margin: 0 auto;
	width: 85%
}
.stepbar .stepbarwrap {
	margin: 2em 0;
	position: relative
}
.stepbar .stepbarwrap .steptitle {
	display: inline-flex;
	align-items: center
}
.stepbar .stepbarwrap .steptitle .stepcircle {
	display: inline-block;
	width: 7em;
	height: 7em;
	content: "";
	border-radius: 50%;
	background-color: var(--deepColor);
	color: #fff;
	text-align: center;
	aspect-ratio: 1/1
}
.stepbar .stepbarwrap .steptitle .stepcircle span {
	display: inline-block;
	line-height: 1.6em;
	font-size: 4em;
	font-weight: 700;
	position: relative;
	top: 0em
}
.stepbar .stepbarwrap .steptitle .title {
	margin: .5em;
	font-weight: 700;
	font-size: 2em;
	color: var(--deepColor);
	line-height: 1.2em;
	width: calc(100% - 4em)
}
.stepbar .stepbarwrap .steptxt {
	padding-left: 8em
}
.stepbar .stepbarwrap .steptxt .txt {
	font-size: 1em
}
.stepbar .stepbarwrap .stepline {
	width: 6px;
	height: calc(100% + 1em);
	background-color: #e3e3e3;
	position: absolute;
	top: 2em;
	left: 3.4em;
	z-index: -1
}
.stepbarwrap:last-of-type .stepline:last-of-type {
	display: none
}
@media screen and (max-width:960px) {
	.stepbar {
		width: 90%
	}
}
.qa {
	background: var(--lightColor);
	padding-top: 80px;
	margin-top: 0
}
.qa h2::before {
	position: absolute;
	border-bottom: 3px solid gray;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	content: ''
}
.qa ul {
	margin: 0 auto 20px;
	width: 100%
}
.qa ul li.q {
	list-style: none;
	background: var(--middleColor);
	border-radius: 10px;
	padding: 20px;
	font-size: 23px;
	font-weight: 700;
	color: #fff
}
.qa ul li.q span {
	color: #fff;
	margin-right: 20px;
	font-weight: 700
}
.qa ul li.a {
	list-style: none;
	padding: 20px;
	color: #1a1a1a;
	font-size: 18px;
	line-height: 1.8em
}
.qa ul li.a span {
	color: var(--middleColor);
	margin-right: 20px;
	font-weight: 700
}
.ctaForm {
	background: var(--deepColor);
	padding-top: 80px;
	margin-top: 0
}
.ctaForm .floatLeft {
	width: 50%
}
.ctaForm .floatLeft img {
	width: 310px;
	height: auto;
	margin: 0 auto 30px auto;
	display: block
}
.ctaForm .floatLeft p span {
	font-size: 23px;
	font-weight: 700;
	line-height: 2em
}
.ctaForm .floatLeft p {
	font-size: 20px;
	line-height: 2em;
	color: #fff;
	padding-right: 10px
}
.ctaForm .floatRight {
	width: 50%
}
.ctaForm .floatRight h2 {
	font-size: 20px;
	color: #fff;
	margin: 30px auto 0!important;
	padding: 0!important
}
.ctaForm .floatRight p {
	font-size: 20px;
	line-height: 2em;
	color: #fff
}
.ctaForm table {
	background: #fff;
	width: 100%;
	margin: 30px auto;
	border: 1px solid #c9c9c9
}
.ctaForm table th {
	width: 30%;
	padding: 10px 20px;
	background: #ededed;
	border: 1px solid #c9c9c9;
	text-align: left
}
.ctaForm table td {
	width: 70%;
	padding: 10px 20px;
	background: #fff;
	border: 1px solid #c9c9c9
}
.ctaForm .cta-bgcolor {
	background: #f2f2f2;
	border: 1px solid #c9c9c9
}
input:not([type='checkbox']) {
	width: 100%;
	height: 50px;
	border: 1px solid #c9c9c9;
	padding-left: 10px
}
textarea {
	width: 100%;
	border: 1px solid #c9c9c9;
	padding: 10px
}
.hobby-selection label {
	padding-top: 2px;
	margin-right: 10px
}
.req {
	background: var(--redColor);
	color: #fff;
	font-size: 13px;
	padding: 2px 5px
}
.hover-transition {
	text-align: center;
	font-size: 21px;
	color: #fff;
	border: none!important;
	margin: 30px auto;
	width: 400px!important;
	display: block;
	padding: 0 0 2px!important;
	border-radius: 35px;
	background: var(--graOrangeColor);
	cursor: pointer!important
}
.hover-transition:hover {
	opacity: .7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s
}
.ctaBtn {
	font-size: 20px;
	color: #fff;
	text-align: center;
	padding: 15px 15px 20px;
	display: block;
	margin: 0 auto;
	line-height: 1.8em;
	border-radius: 65px;
	width: auto;
	background: var(--ctaButtonColor);
	box-shadow: 0 8px 8px rgba(0, 0, 0, .3)
}
.ctaBtn span {
	font-size: 30px;
	font-weight: 700
}
.ctaBtn span .fa-download {
	color: var(--yellowColor)
}
a.btnLink {
	font-size: 20px;
	text-decoration: underline;
	text-align: center;
	color: #1a1a1a!important;
	padding: 15px 0 0;
	display: block
}
.company {
	background: #fff
}
.company h2 {
	font-size: 20px;
	padding-bottom: 10px
}
.company table {
	width: 50%;
	border: none;
	margin: 0 auto
}
.company table th {
	width: 30%;
	border-bottom: 1px solid #b1b1b1;
	padding: 10px 0;
	text-align: left
}
.company table td {
	width: 70%;
	border-bottom: 1px solid #b1b1b1;
	padding: 10px 0
}
.footer_banner {
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .6s;
	background-color: rgba(0, 0, 0, .5)
}
.footer_banner .ctaBtn {
	font-size: 20px;
	color: #fff;
	text-align: center;
	display: block;
	margin: 10px auto;
	line-height: 1.8em;
	border-radius: 65px;
	width: 80%;
	max-width: 1000px;
	background: var(--ctaButtonColor);
	padding: 15px
}
.footer_banner .ctaBtn span {
	font-size: 30px;
	font-weight: 700
}
.footer_banner .ctaBtn span .fa-download {
	color: var(--yellowColor)
}
.hide {
	bottom: -130px
}
.footer {
	width: 100%;
	height: auto;
	color: #fff;
	background: #202020;
	clear: both;
	margin: 0 auto;
	padding: 20px 0 140px
}
.footer p {
	color: #a2a2a2;
	font-size: 13px;
	text-align: center;
	line-height: 2.3em
}
.footer p.sub {
	font-size: 11px;
	text-align: center;
	line-height: 2.3em;
	margin: 6px auto 0
}
p.pagetop {
	position: fixed;
	bottom: 130px;
	margin-left: 95%;
	height: 43px;
	width: 43px;
	text-align: center;
	cursor: pointer;
	color: #FFF;
	z-index: 5500
}
p.pagetop a {
	width: 43px;
	height: 43px;
	display: block
}
p.pagetop a img {
	width: 43px;
	height: 43px;
	display: block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out
}
.footer a:link, .footer a:visited, .footer a:hover {
	color: #a2a2a2!important;
	text-decoration: underline
}
.main p {
	text-align: center;
	margin: 30px auto 0
}
.content {
	min-height: calc(100vh - 196px)
}
.clearfix:after {
	content: "";
	display: block;
	clear: both
}
.clearfix {
	display: inline-block
}
.clearfix {
	display: block
}
img.img-radius {
	border-radius: 50%;
	object-fit: cover
}
@media only screen and (min-width:768px) and (max-width:1180px) {
	.pc {
		display: none!important
	}
	.tb {
		display: block!important
	}
	header {
		width: 100%;
		height: auto;
		background: #fff;
		top: 0;
		box-sizing: border-box;
		position: relative;
		z-index: 9999
	}
	.headerWrap {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0
	}
	.headerWrap a.dlBtn {
		display: block
	}
	.headerWrap a.hCtnBtn {
		display: block
	}
	.headerWrap p {
		display: block
	}
	#header {
		background: #fff;
		width: 100%;
		height: 78px;
		padding: 0 0;
		box-sizing: border-box;
		position: relative;
		z-index: 2
	}
	#menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: #fff;
		width: 100%;
		font-size: 10px
	}
	.f-menu {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0;
		height: 70px;
		width: 100%
	}
	.f-menu div {
		width: 20%;
		height: 70px;
		text-align: center;
		padding: 0;
		vertical-align: middle
	}
	.f-menu div .f-menuTxt {
		display: block;
		padding: 25px 0 0;
		color: #1a1a1a!important;
		text-decoration: none;
		line-height: 1.4em;
		font-size: 13px
	}
	.f-menu div .f-menuTxt_tel {
		display: block;
		padding: 8px 0 0;
		color: #1a1a1a!important;
		text-decoration: none;
		line-height: 1.4em;
		font-size: 13px
	}
	.headerWrap #menu a.dlBtn {
		width: 100%;
		height: 70px;
		color: #fff!important;
		background: var(--graOrangeColor);
		font-size: 10px;
		display: block;
		text-align: center;
		line-height: 1.4em;
		padding-top: 15px;
		font-size: 13px
	}
	.headerWrap #menu a.hCtnBtn {
		width: 100%;
		height: 70px;
		color: #fff!important;
		background: var(--graBlueColor);
		font-size: 10px;
		display: block;
		text-align: center;
		line-height: 1.4em;
		padding-top: 15px;
		font-size: 13px
	}
}
@media screen and (max-width:768px) {
	.pc {
		display: none!important
	}
	.tb {
		display: none!important
	}
	.sp {
		display: block!important
	}
	.wrap {
		padding: 40px 0;
		width: 100%;
		height: auto;
		margin: 0 auto;
		background: #fff
	}
	.wrap_inner {
		width: 90%;
		margin: 0 auto;
		height: auto;
		padding: 0
	}
	.btn .wrap_inner {
		width: 90%
	}
	.br-pc {
		display: none
	}
	.br-sp {
		display: block
	}
	.br-tb {
		display: block
	}
	h1 {
		margin: 0 auto
	}
	h2 {
		text-align: center;
		font-size: 30px;
		line-height: 1.3em;
		font-weight: 700;
		margin: 0 auto 10px;
		position: relative;
		padding: .5rem 0 2rem
	}
	.midashi {
		width: 100%;
		margin: 0 auto;
		display: block
	}
	.floatLeft {
		float: none!important;
		margin: 10px auto
	}
	.floatRight {
		float: none!important;
		margin: 10px auto
	}
	header {
		width: 100%;
		height: auto;
		background: #fff;
		top: 0;
		box-sizing: border-box;
		position: relative;
		z-index: 9999
	}
	.headerWrap {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0
	}
	.headerWrap .h-logo {
		display: block
	}
	.headerWrap .h-logo img {
		width: 200px;
		margin: 0 auto;
		display: block
	}
	.headerWrap a.dlBtn {
		display: none
	}
	.headerWrap a.hCtnBtn {
		display: none
	}
	.headerWrap p {
		display: none
	}
	#header {
		background: #fff;
		width: 100%;
		height: 78px;
		padding: 15px 0;
		box-sizing: border-box;
		position: relative;
		z-index: 2
	}
	#menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: #fff;
		width: 100%;
		font-size: 10px
	}
	.f-menu {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0;
		height: 70px;
		width: 100%
	}
	.f-menu div {
		width: 20%;
		height: 70px;
		text-align: center;
		padding: 0;
		vertical-align: middle
	}
	.f-menu div .f-menuTxt {
		display: block;
		padding: 20px 0 0;
		color: #1a1a1a!important;
		text-decoration: none;
		line-height: 1.4em
	}
	.f-menu div .f-menuTxt_tel {
		display: block;
		padding: 15px 0;
		color: #1a1a1a!important;
		text-decoration: none;
		line-height: 1.4em
	}
	.headerWrap #menu a.dlBtn {
		width: 100%;
		height: 70px;
		color: #fff!important;
		background: var(--graOrangeColor);
		font-size: 10px;
		display: block;
		text-align: center;
		line-height: 1.4em;
		padding-top: 15px
	}
	.headerWrap #menu a.hCtnBtn {
		width: 100%;
		height: 70px;
		color: #fff!important;
		background: var(--graBlueColor);
		font-size: 10px;
		display: block;
		text-align: center;
		line-height: 1.4em;
		padding-top: 15px
	}
	.fv {
		width: 100%;
		height: auto;
		background: linear-gradient(to right, #fff, var(--middleColor));
		padding: 25px 0
	}
	.fvWrap {
		width: 90%;
		max-width: 1280px;
		padding: 0;
		margin: 0 auto
	}
	.fvWrap .floatLeft {
		width: 100%;
		margin-bottom: 0
	}
	.fvWrap p.upperCatchcopy {
		font-size: clamp(16px, calc(100vw * 16 / 375), 20px);
		margin: 10px auto .5em
	}
	.fvWrap .catchcopy {
		font-size: min(8.5vw, 44px);
		font-weight: 900;
		line-height: 1.4em;
		text-align: center
	}
	.fvWrap .catchcopy span.thinTxt {
		font-size: .8em;
		font-weight: 300
	}
	.fvWrap .catchcopy span.blueBack {
		background: var(--deepColor);
		color: #fff
	}
	.fvWrap p.subCatchcopy {
		font-size: clamp(14px, calc(100vw * 14 / 375), 18px);
		font-weight: 700;
		line-height: 1.5em;
		text-align: center
	}
	.fvWrap .subCatchcopy span.underline {
		font-size: 1.1em;
		font-weight: 900;
		color: var(--deepColor);
		background: linear-gradient(transparent 60%, var(--yellowColor) 30%);
		display: inline-block
	}
	.fvWrap p {
		font-size: clamp(12px, calc(100vw * 12 / 375), 16px);
		margin: 5px 0 0 0;
		line-height: 1.5em;
		text-align: center
	}
	.imageBox {
		height: auto;
		overflow: hidden
	}
	.fvWrap img {
		width: 65%;
		height: auto;
		margin: 0 auto;
		display: block
	}
	.fvWrap a.btnLink {
		font-size: 16px;
		text-decoration: underline;
		text-align: center;
		color: #1a1a1a!important;
		padding: 5px 0 20px;
		display: block
	}
	.sliderspace {
		background: #f6f6f6
	}
	.sliderspace h2 {
		font-size: 22px!important;
		margin-bottom: 0px!important
	}
	.sliderArea {
		width: 100%;
		max-width: 1000px;
		height: auto;
		margin: 0 auto
	}
	.slider {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto
	}
	.slider img {
		width: 100%;
		height: auto
	}
	.slick-prev {
		left: 4%;
		z-index: 1
	}
	.slick-next {
		right: 10%;
		z-index: 1
	}
	.problem {
		background: var(--lightColor)
	}
	.problem h2 {
		color: var(--deepColor);
		padding: 10px;
		text-align: center;
		border-radius: 35px;
		width: 100%;
		margin: 0 auto 20px;
		font-weight: 700
	}
	.problem ul {
		width: 100%;
		margin: 0 auto
	}
	.problem ul li {
		list-style: none;
		width: 100%;
		height: auto;
		float: none;
		margin: 0 auto 30px
	}
	.problem ul li h3 {
		font-size: 24px;
		text-align: center;
		line-height: 1.4em;
		margin-bottom: 20px
	}
	.problem ul li p {
		font-size: 17px;
		line-height: 1.4em
	}
	.problem ul li img {
		width: 60%;
		height: auto;
		margin: 0 auto;
		display: block
	}
	.arrow {
		background: var(--graOrangeColor);
		height: calc(tan(60deg) * 60px / 3);
		width: 200px;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		margin: 30px auto;
		clear: both
	}
	.result {
		font-size: 24px;
		text-align: center;
		line-height: 1.6em;
		font-weight: 700
	}
	.solution {
		background: #fff
	}
	.solution ul {
		width: 100%;
		margin: 0 auto
	}
	.solution ul li {
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0 auto 50px;
		background: #fff
	}
	.solution ul li .pho {
		width: 100%!important;
		/* margin: 9 auto; */
		display: block;
	}
	.solution ul li .floatLeft {
		width: 100%
	}
	.solution ul li .floatRight {
		width: 100%
	}
	.solution ul li h3 {
		color: var(--deepColor);
		font-size: 26px;
		margin: 0 auto 20px;
		line-height: 1.6em;
		font-weight: 700;
		text-align: center
	}
	.solution ul li p {
		font-size: 18px;
		margin: 0 auto;
		line-height: 1.8em
	}
	.solution h2, .solution h2 span {
		font-size: 32px
	}
	.solution ul li h3 {
		font-size: 20px
	}
	.solution .otherPoint {
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
		padding: 30px;
		background: var(--lightColor);
		border-radius: 20px
	}
	.solution .otherPoint table {
		font-size: 19px;
		font-weight: 700;
		table-layout: auto
	}
	.solution .otherPoint table th {
		width: 10%;
		padding: 10px 0
	}
	.solution .otherPoint table td {
		width: 90%;
		padding: 10px 0 10px 10px;
		line-height: 1.5em
	}
	.solution .otherPoint table th .fa-square-check {
		color: var(--redColor);
		font-size: 25px
	}
	.merit {
		background: var(--backColor)
	}
	.merit table {
		width: 100%;
		margin: 0 auto 50px
	}
	.merit table th {
		width: 100%;
		display: block
	}
	.merit table th img {
		width: 80%;
		height: auto;
		margin-bottom: 10px
	}
	.merit table td {
		width: 100%;
		display: block;
		padding-left: 0
	}
	.merit table td h2 {
		font-size: min(5.5vw, 26px);
		text-align: center;
		margin: 0 auto
	}
	.merit table td .intro {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.6em;
		margin: 0 auto 30px
	}
	.merit table td .intro span {
		color: var(--redColor)
	}
	.merit ul {
		width: 100%;
		margin: 0 auto
	}
	.merit ul li {
		list-style: none;
		width: 100%;
		height: auto;
		text-align: center;
		background: #fff;
		padding: 30px 20px;
		margin: 0 auto 30px;
		border-radius: 20px;
		box-shadow: 0 0 8px #eee
	}
	.merit ul li h3 {
		text-align: center;
		color: var(--deepColor);
		font-size: 23px;
		line-height: 1.5em
	}
	.merit ul li img {
		width: 100px;
		height: auto
	}
	.merit ul li p {
		font-size: 15px;
		text-align: left
	}
	.reason {
		background: var(--lightColor)
	}
	.reason .addTxt {
		color: var(--ttlColor);
		font-weight: 700;
		font-size: 20px;
		line-height: 1.5em!important;
		text-align: center
	}
	.reason h2 {
		font-size: 30px;
		line-height: 1.3em
	}
	.reason ul li {
		list-style: none;
		width: 100%;
		height: auto;
		margin: 0 auto 30px;
		padding: 20px;
		background: #fff;
		position: relative
	}
	.reason ul li .num {
		background: var(--middleColor);
		color: #fff;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		left: 50%;
		text-align: center;
		padding-top: 20px;
		font-size: 16px;
		line-height: 1.6em;
		font-weight: 700;
		margin-left: -50px
	}
	.reason ul li .num span {
		font-size: 30px
	}
	.reason ul li h3 {
		font-size: 22px;
		line-height: 1.5em;
		margin: 15px auto;
		text-align: center
	}
	.reason ul li .floatLeft {
		width: 100%;
		margin: 100px auto 0
	}
	.reason ul li .floatRight {
		width: 100%
	}
	.reason ul li p {
		font-size: 15px;
		line-height: 1.6em
	}
	.use {
		background: none
	}
	.use.scrollin {
		background: url(../images/7-useBg_sp.webp);
		background-size: cover;
		background-position: center
	}
	.use p {
		text-align: center;
		font-size: 21px;
		margin: 20px auto;
		color: #fff;
		line-height: 1.8em;
		font-weight: 700
	}
	.use p.genre {
		background: #fff;
		color: #1a1a1a;
		font-size: 16px;
		padding: 20px 20px;
		width: 90%;
		margin: 20px auto;
		font-weight: 300
	}
	.performance {
		background: var(--backColor)
	}
	.performance table {
		width: 100%;
		height: auto;
		padding: 30px;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 0 8px #eee;
		margin: 0 auto 50px
	}
	.performance table th {
		width: 100%;
		display: block;
		padding-top: 30px
	}
	.performance table th img {
		width: 180px;
		height: auto;
		display: block;
		margin: 0 auto
	}
	.performance table td {
		width: 100%;
		padding: 10px 30px 30px 30px;
		display: block
	}
	.performance table td h3 {
		margin: 0 auto;
		text-align: center;
		line-height: 1.5em
	}
	.performance table td .name {
		font-size: 14px;
		font-weight: 700;
		text-align: center;
		margin: 30px auto
	}
	.performance table td p {
		line-height: 1.8em
	}
	.price_f table {
		width: 100%;
		margin: 30px auto 0;
		border-radius: 20px
	}
	.price_f table th {
		text-align: center;
		width: 33%;
		vertical-align: top;
		padding: 0
	}
	.price_f table th.osusume, .price_f table td.osusume {
		box-shadow: 4px 0 0 0 var(--redColor) inset, -4px 0 0 0 var(--redColor) inset;
		position: relative;
		background-color: var(--osusumeColor)
	}
	.price_f table th.osusume::before {
		content: '';
		width: 100%;
		height: 25px;
		position: absolute;
		background-color: var(--osusumeColor);
		left: 0;
		border: 4px solid var(--redColor);
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		border-bottom: none
	}
	.price_f table tr.end td.osusume::after {
		content: '';
		width: 100%;
		height: 20px;
		position: absolute;
		background-color: var(--osusumeColor);
		left: 0;
		border: 4px solid var(--redColor);
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		border-top: none
	}
	.price_f table th.osusume .osusumeIcon {
		width: max-content;
		color: var(--redColor);
		font-size: 16px;
		font-weight: 700;
		padding: .1em .6em;
		background: #fff;
		border: 3px solid var(--redColor);
		border-radius: 100vh;
		position: absolute;
		top: -46px;
		left: 50%;
		transform: translateX(-50%)
	}
	.price_f table th h3 {
		color: var(--deepColor);
		font-size: 14px;
		text-align: center;
		line-height: 1.6em;
		margin: 10px 0
	}
	.price_f table th p, .price_f table td p {
		font-size: 12px;
		line-height: 1.6em;
		font-weight: 300;
		margin: 3px 0
	}
	.price_f table th p span, .price_f table td p.price-txt {
		font-size: 17px;
		font-weight: 700
	}
	.price_f table th.osusume h3 {
		color: var(--deepColor);
		text-align: center;
		line-height: 1.6em;
		padding: 0 5px
	}
	.price_f table th.addTxt {
		background: #fff
	}
	.price_f table th.addTxt p {
		font-size: 16px;
		margin-top: 10px
	}
	.price_f table td {
		width: 33%;
		background: var(--backColor);
		vertical-align: top;
		padding: 0;
		line-height: 1.9em
	}
	.price_f table td span {
		font-size: 15px;
		font-weight: 700
	}
	.price_s {
		background: var(--lightColor)
	}
	.priceTbl {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		text-align: center
	}
	.priceTbl thead th {
		padding: 1em .8em;
		border-right: 1px solid #fff
	}
	.priceTbl td {
		padding: 2px;
		vertical-align: top
	}
	.priceTbl thead th:not(:first-child) {
		background: #6E6E6E;
		color: #fff;
		font-size: 18px;
		padding: 1em .5em
	}
	.priceTbl thead th span {
		font-size: .8rem
	}
	.priceTbl thead th:nth-child(2) {
		color: #000;
		background-color: var(--backColor);
		position: relative;
		border-left: 4px solid var(--redColor);
		border-right: 4px solid var(--redColor);
		border-top: 4px solid var(--redColor)!important
	}
	.priceTbl thead th:nth-child(2)::before {
		content: '';
		width: calc(100% + 8px);
		height: 20px;
		position: absolute;
		background-color: #fff;
		left: -4px;
		bottom: 94%;
		border: 4px solid var(--redColor);
		border-bottom: none;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: var(--backColor)
	}
	.priceTbl thead th:nth-child(2) p {
		display: inline-block
	}
	.priceTbl thead th:nth-child(2) img {
		display: none
	}
	.priceTbl tbody th, .priceTbl tbody td {
		border: 1px solid #b0b0b0
	}
	.priceTbl tbody th {
		background-color: var(--middleColor);
		color: #fff;
		vertical-align: middle;
		border-bottom: 1px solid #fff!important
	}
	.priceTbl tbody td {
		background-color: #fff;
		font-size: 14px;
		line-height: 1.4em
	}
	.priceTbl tbody td span {
		font-size: 16px;
		line-height: 1.3em
	}
	.priceTbl td:nth-child(2) {
		background: #fff;
		border-left: 4px solid var(--redColor);
		border-right: 4px solid var(--redColor)
	}
	.table-scroll {
		overflow-x: auto;
		padding-top: 20px
	}
	.flow {
		background: var(--backColor);
		margin-top: 0
	}
	.stepbar {
		margin: 0 auto;
		width: 100%
	}
	.stepbar .stepbarwrap {
		margin: 2em 0;
		position: relative
	}
	.stepbar .stepbarwrap .steptitle {
		display: inline-flex;
		align-items: center
	}
	.stepbar .stepbarwrap .steptitle .stepcircle {
		display: inline-block;
		width: 4em;
		height: 4em;
		content: "";
		border-radius: 50%;
		background-color: var(--deepColor);
		color: #fff;
		text-align: center
	}
	.stepbar .stepbarwrap .steptitle .stepcircle span {
		display: inline-block;
		line-height: 1.9em;
		font-size: 2em;
		font-weight: 700;
		position: relative;
		top: 0em
	}
	.stepbar .stepbarwrap .steptitle .title {
		margin: .5em;
		font-weight: 700;
		font-size: 1.3em;
		color: var(--deepColor);
		line-height: 1.4em;
		width: calc(100% - 4em)
	}
	.stepbar .stepbarwrap .steptxt {
		padding-left: 4.5em
	}
	.stepbar .stepbarwrap .steptxt .txt {
		font-size: 1em
	}
	.stepbar .stepbarwrap .stepline {
		width: 6px;
		height: calc(100% + 3em);
		background-color: #e3e3e3;
		position: absolute;
		top: 1.5em;
		left: 1.8em;
		z-index: -1
	}
	.stepbarwrap:last-of-type .stepline:last-of-type {
		display: none
	}
	.qa {
		background: var(--lightColor);
		margin-top: 0
	}
	.qa h2 {
		position: relative;
		margin-bottom: 50px
	}
	.qa h2::before {
		position: absolute;
		border-bottom: 3px solid gray;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 80px;
		content: ''
	}
	.qa ul {
		margin: 0 auto 20px;
		width: 100%
	}
	.qa ul li.q {
		list-style: none;
		background: var(--middleColor);
		border-radius: 10px;
		padding: 20px;
		font-size: 18px;
		font-weight: 700;
		color: #fff
	}
	.qa ul li.q span {
		color: #fff;
		margin-right: 20px;
		font-weight: 700
	}
	.qa ul li.a {
		list-style: none;
		padding: 20px;
		color: #1a1a1a;
		font-size: 16px;
		line-height: 1.8em
	}
	.qa ul li.a span {
		color: var(--middleColor);
		margin-right: 20px;
		font-weight: 700;
		font-size: 18px
	}
	.ctaForm {
		background: var(--deepColor);
		margin-top: 0
	}
	.ctaForm .floatLeft {
		width: 100%
	}
	.ctaForm .floatLeft img {
		margin: -30px auto 30px;
		width: 50%;
		height: auto;
		display: block
	}
	.ctaForm .floatLeft p span {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.8em
	}
	.ctaForm .floatLeft p {
		color: #fff;
		font-size: 15px;
		line-height: 1.6em;
		margin-bottom: 30px
	}
	.ctaForm .floatRight {
		width: 100%
	}
	.ctaForm .floatRight h2 {
		font-size: 20px!important;
		color: #fff;
		margin: 30px auto 0!important;
		padding: 0!important
	}
	.ctaForm .floatRight p {
		color: #fff;
		font-size: 15px;
		line-height: 1.6em;
		text-align: center
	}
	.ctaForm table {
		background: #fff;
		width: 100%;
		margin: 30px auto;
		border: 1px solid #c9c9c9
	}
	.ctaForm table th {
		width: 30%;
		padding: 10px;
		background: #ededed;
		border: 1px solid #c9c9c9;
		text-align: left;
		font-size: 13px
	}
	.ctaForm table td {
		width: 70%;
		padding: 10px;
		background: #fff;
		border: 1px solid #c9c9c9
	}
	input:not([type='checkbox']) {
		width: 100%;
		height: 50px;
		border: 1px solid #c9c9c9;
		padding-left: 10px;
		font-size: 12px
	}
	textarea {
		width: 100%;
		border: 1px solid #c9c9c9;
		padding: 10px;
		font-size: 12px
	}
	.hobby-selection label {
		padding-top: 2px;
		margin-right: 10px
	}
	.req {
		background: var(--redColor);
		color: #fff;
		font-size: 13px;
		padding: 2px 5px
	}
	.hover-transition {
		text-align: center;
		font-size: 20px;
		color: #fff;
		background: orange;
		border: none;
		margin: 30px auto;
		width: 90%!important;
		display: block;
		padding: 10px 0;
		border-radius: 35px;
		background: var(--graOrangeColor);
		cursor: pointer!important
	}
	.hover-transition:hover {
		opacity: .6;
		filter: alpha(opacity=60);
		-ms-filter: "alpha( opacity=60 )";
		-webkit-transition: 0.7s;
		-moz-transition: 0.7s;
		-o-transition: 0.7s;
		transition: 0.7s
	}
	.ctaBtn {
		font-size: 14px;
		color: #fff;
		text-align: center;
		padding: 15px;
		display: block;
		margin: 0 auto;
		background: orange;
		line-height: 1.8em;
		border-radius: 65px;
		width: 100%;
		background: var(--ctaButtonColor)
	}
	.ctaBtn span {
		font-size: 18px;
		font-weight: 700
	}
	.ctaBtn span .fa-download {
		color: var(--yellowColor)
	}
	a.btnLink {
		font-size: 16px;
		text-decoration: underline;
		text-align: center;
		color: #1a1a1a!important;
		padding: 5px 0 0;
		display: block
	}
	.company {
		background: #fff
	}
	.company h2 {
		font-size: 18px!important
	}
	.company table {
		width: 100%;
		border: none
	}
	.company table th {
		width: 30%;
		border-bottom: 1px solid #b1b1b1;
		padding: 10px 0;
		text-align: left
	}
	.company table td {
		width: 70%;
		border-bottom: 1px solid #b1b1b1;
		padding: 10px 0
	}
	.footer_banner {
		width: 100%;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .6s;
		display: block
	}
	.footer_banner .ctaBtn {
		font-size: 14px;
		color: #fff;
		text-align: center;
		padding: 15px;
		display: block;
		margin: 10px auto;
		line-height: 1.8em;
		border-radius: 65px;
		width: 90%;
		background: var(--ctaButtonColor);
		display: block
	}
	.footer_banner .ctaBtn span {
		font-size: 18px;
		font-weight: 700
	}
	.footer_banner .ctaBtn span .fa-download {
		color: var(--yellowColor)
	}
	.hide {
		bottom: -105px
	}
	.footer {
		width: 100%;
		height: auto;
		color: #fff;
		background: #202020;
		clear: both;
		margin: 0 auto;
		padding: 20px 0 50px
	}
	.footer p {
		color: #a2a2a2;
		font-size: 13px;
		text-align: center;
		line-height: 2.3em
	}
	.footer p.sub {
		font-size: 11px;
		text-align: center;
		margin: 7px auto 0;
		line-height: 1.8em
	}
	p.pagetop {
		position: fixed;
		bottom: 150px;
		margin-left: 85%;
		height: 43px;
		width: 43px;
		text-align: center;
		cursor: pointer;
		color: #FFF;
		z-index: 5500
	}
	p.pagetop a {
		width: 43px;
		height: 43px;
		display: block
	}
	p.pagetop a img {
		width: 43px;
		height: 43px;
		display: block;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out
	}
	.main p {
		text-align: center;
		margin: 30px auto 0
	}
	.content {
		min-height: calc(100vh - 116px)
	}
	.page p {
		font-size: 13px;
		line-height: 1.7em;
		text-align: justify;
		text-justify: inter-ideograph
	}
	.sp_br {
		display: block
	}
}
@media screen and (max-width:466px) {
	.f-menu div .f-menuTxt_tel {
		padding: 0
	}
}
@media screen and (min-width:1181px) {
	.f-menu img {
		display: inline-block;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 auto
	}
}
#ctaForm .hobby-selection input[type="checkbox"] {
	vertical-align: middle
}
form.myForm div.input.input_unit, form.myForm div.submit.form_input_submit {
	background: #f2f2f2;
	border: 1px solid #c9c9c9
}
form.myForm div.submit.form_input_submit {
	width: calc(100% - 20px);
	margin-right: auto;
	margin-left: auto
}
form.myForm input[type="submit"] {
	text-align: center;
	font-size: 21px;
	color: #fff;
	border: none!important;
	margin: 30px auto;
	max-width: 400px;
	font-weight: 700;
	display: block;
	padding: 0 0 2px!important;
	border-radius: 35px;
	background: var(--graOrangeColor);
	cursor: pointer!important
}
form.myForm input[type="submit"]:hover {
	opacity: .7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	transition: 0.7s
}
form.myForm .required .my_column.my_left label:first-child:after, form.myForm th.required label:first-child:after, form.myForm span.required:after, div.komoju_form .required .my_column.my_left label:first-child:after {
	line-height: 1rem;
	box-sizing: content-box
}
.submit.form_input_submit input {
	cursor: pointer
}
.ctaForm form.myForm div.submit {
	margin-top: 0
}
@media only screen and (max-width:800px) {
	.ctaForm .content_form .input_unit {
		margin-top: 0;
		margin-bottom: 0
	}
	.ctaForm .content_form .input_unit .my_column.my_right, .ctaForm .content_form .input_unit .my_column.my_right input {
		width: 100%
	}
	form.myForm div.textarea_frame textarea {
		width: 100%
	}
}
.fvWrap.catch-long p.upperCatchcopy {
	font-size: clamp(22px, calc(100vw* 22 / 769), 40px);
	font-weight: 900;
	margin-top: 0;
	padding: 10px 0 0
}
.fvWrap.catch-long h1.catchcopy {
	font-size: clamp(36px, calc(100vw * 36 / 769), 60px);
	font-weight: 900;
	margin: 0;
	line-height: 1.3em
}
.fvWrap.catch-long p.subCatchcopy {
	font-size: clamp(18px, calc(100vw * 18 / 769), 32px);
	font-weight: 700;
	margin: 20px 0 0 0;
	line-height: 1.5em
}
.fvWrap.catch-long p, .fvWrap.catch-long p.subCatchcopy {
	margin: 10px 0 0 0;
	line-height: 1.5em
}
.fvWrap.catch-long .floatLeft {
	width: 70%
}
.fvWrap.catch-long img {
	width: 30%;
	height: auto
}
@media screen and (max-width:768px) {
	.fvWrap.catch-long p.upperCatchcopy {
		font-size: clamp(14px, calc(100vw * 28 / 769), 28px);
		margin: auto 0;
		padding-top: 10px
	}
	.fvWrap.catch-long h1.catchcopy {
		font-size: clamp(16px, calc(100vw * 36 / 769), 36px)
	}
	.fvWrap.catch-long p.subCatchcopy {
		font-size: clamp(12px, calc(100vw * 24 / 769), 24px)
	}
	.fvWrap.catch-long .floatLeft {
		width: 100%
	}
	.fvWrap.catch-long img {
		width: 65%;
		height: auto
	}
}
.fv .textList {
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px
}
.fv .textList .tag {
	margin: 5px;
	padding: 5px 5px;
	font-size: min(1.7vw, 20px);
	font-weight: 700;
	color: #FFF;
	background: var(--graBlueColor);
	text-align: center;
	width: 95%
}
@media only screen and (min-width:1000px) {
	.fv .textList .tag.col-1 {
		width: 55%
	}
	.fv .textList .tag.col-2 {
		width: 46%
	}
}
@media only screen and (max-width:1000px) {
	.fv .textList .br-pc {
		display: none
	}
	.fv .textList {
		gap: 0
	}
}
@media only screen and (max-width:768px) {
	.fv .textList .tag {
		padding: 5px;
		font-size: min(2.8vw, 16px)
	}
}
.grecaptcha-badge {
	visibility: hidden
}
.img-caption {
	font-weight: 400;
	font-size: .8em
}