@charset "UTF-8";

/*=====================================
テキスト・カラー指定
=====================================*/
:root {
    --wht: #fff;
    --blk: #1e1e1e;
    --dgry: #474a4c;
    --gry: #8c8c8c;
    --pgry: #f2f2f2;
    --lgry: #ccc;
	--red: #d80519;
    --clr1: #1b4a8e;
    --clr2: #ebf4fc;
    --clr3: #d9e7f4;
    --clr4: #2868b5;
    --clr5: #4a91d8;
    --trp: rgba(255,255,255,0);
    --c: center;
    --r: right;
	--l: left;
	--t4xl: clamp(32px, 8.2vw, 36px);
    --t3xl: clamp(28px, 7.44vw, 32px);
    --t2xl: clamp(24px, 6.54vw, 28px);
    --txl: clamp(19px, 5.12vw, 24px);
    --tl: clamp(17px, 4.6vw, 21px);
    --tm: clamp(15px, 4.1vw, 18px);
    --nm: clamp(13px, 3.58vw, 15px);
    --ts: clamp(9px, 2.82vw, 11px);
    --t2s: clamp(7px, 2.3vw, 9px);
	--fgt: "Figtree";
	--mpr: "M PLUS Rounded 1c"
}
@media (min-width: 835px) {
	:root {
		--wht: #fff;
		--t4xl: clamp(56px, 4.46vw, 61px);
		--t3xl: clamp(44px, 3.59vw, 49px);
		--t2xl: clamp(36px, 2.85vw, 39px);
		--txl: clamp(30px, 2.26vw, 31px);
		--tl: clamp(23px, 2vw, 25px);
		--tm: clamp(18px, 1.7vw, 20px);
		--nm: clamp(14px, 1.5vw, 18px);
		--ts: clamp(10px, .95vw, 13px);
		--t2s: clamp(8px, .73vw, 10px);
	}
}
a {
	color: var(--clr4);
    text-decoration: underline;
}
@media (hover: hover) {
	a, a * {
    	transition: .3s	
	}
	a:hover {
		color: var(--clr5);
		text-decoration: none
	}
	a::before, a::after {
		transition: .3s
	}
}
html, body {
	color: var(--blk);
	font-family: "Roboto", "Noto Sans JP", serif;
	font-size: var(--nm);
	line-height: 1.8;
	letter-spacing: .05em
}
body {
	overflow-x: hidden;
	width: 100%
}
.pd02 {
	padding: min(2%,16px)!important
}
.pd02-05 {
	padding: min(2%,16px) min(5%,30px)!important
}
.pdt00 {
	padding-top: 0!important
}
.pdb00 {
	padding-bottom: 0!important
}
.mg00 {
	margin: 0!important
}
.mgt00 {
	margin-top: 0!important
}
.mgt02 {
	margin-top: min(2%,16px)!important
}
.mgt03 {
	margin-top: min(3%,21px)!important
}
.mgt05 {
	margin-top: min(5%,35px)!important
}
.mgt07 {
	margin-top: min(7%,49px)!important
}
.mgt10 {
	margin-top: min(10%,70px)!important
}
.mgt15 {
	margin-top: min(15%,105px)!important
}
.mgt17 {
	margin-top: min(17%,119px)!important
}
.mgb00 {
	margin-bottom: 0!important
}
.mgb02 {
	margin-bottom: min(2%,16px)!important
}
.mgb03 {
	margin-bottom: min(3%,21px)!important
}
.mgb05 {
	margin-bottom: min(5%,35px)!important
}
.mgb07 {
	margin-bottom: min(7%,49px)!important
}
.mgb10 {
	margin-bottom: min(10%,70px)!important
}
.mgb15 {
	margin-bottom: min(15%,105px)!important
}
.bg-wht {
	background-color: var(--wht)
}
.bg-gry {
	background-color: var(--pgry)
}
@media (max-width: 834px) {
	.spno {
		display: none!important;
	}
	.pcno {
		display: block!important;
	}
}
@media (min-width: 835px) {
	.spno {
		display: block!important;
	}
	.pcno {
		display: none!important;
	}
	.al_center-pc {
		text-align: center
	}
}
.txt-red {
    color: var(--red)!important
}
.txt-gry {
    color: var(--gry)!important
}
.txt-wht {
    color: var(--wht)!important
}
.txt-clr1 {
    color: var(--clr1)!important
}
.txt-c {
    text-align: var(--c)!important
}
.txt-r {
    text-align: var(--r)!important
}
.txt-l {
    text-align: var(--l)!important
}
.fs-es {
	font-size: var(--t2s)!important
}
.fs-s {
	font-size: var(--ts)!important
}
.fs-l {
	font-size: var(--tm)!important
}
.fs-el {
	font-size: var(--tl)!important
}
.fs-exl {
	font-size: var(--txl)!important
}
.ofh {
    overflow: hidden
}




/*=====================================
ヘッダー / メインメニュー
=====================================*/
header {
    flex-shrink: 0;
    position: fixed;
    z-index: 9999;
    left: 50%;
	transform: translateX(-50%);
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 5vw;
    background: var(--wht);
	border-radius: .6em;
}
.header__logo {
	margin: 0;
    padding: 0;
}
.header__logo a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__logo a .hdr-logo {
	flex-shrink: 0;
	aspect-ratio: 270/60;
}
.global-navigation__list li a {
	color: var(--blk);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase
}
.tagline {
    display: none
}
@media (min-width: 1025px) {
	header {
		top: min(3vh,30px);
		width: calc(100% - 60px);
	}
	.header__inner {
		height: 100px;
		padding: 0 2%;
		box-shadow: 0px 0px 12px 0px rgba(100,100,100,.2);
		transition: .4s
	}
	.header__logo a .hdr-logo {
		height: 60px
	}
	header.-is .header__inner {
		height: 80px;
	}
	header.-is .header__logo a .hdr-logo {
		height: 48px;
	}
	.humberger {
		display: none
	}
	.header__nav {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
	.header__nav .header__menu {
		width: min(100%,900px)
	}
	.global-navigation__list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.global-navigation__list li {
		font-size: clamp(12px, 1.1vw, 15px);
		list-style: none
	}
	.global-navigation__list li a {
		display: block;
	}
	.global-navigation__list li a:hover {
		color: var(--clr5)
	}
	.global-navigation__list li a.gn__btn {
		padding: .6em 2em;
		background-color: var(--clr1);
		border-radius: 60px;
		color: var(--wht);
		font-family: var(--mpr);
		white-space: nowrap
	}
	.global-navigation__list li a.gn__btn:hover {
		background-color: var(--clr5);
	}
}
@media (max-width: 1024px) {
/*global navi*/
	header {
		top: 3vw;
		width: 94vw
	}
	.header__inner {
		height: 62px;
		padding: 8px;
		box-shadow: 0px 0px 8px 0px rgba(100,100,100,.2);
	}
	header.-active .header__inner {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0
	}
	.header__logo a .hdr-logo {
		height: 42px
	}
	.humberger {
		display: block;
		aspect-ratio: 1/1;
		width: 46px;
		margin-top: auto;
		margin-left: auto;
		margin-bottom: auto;
		position: relative;
		z-index: 10;
		border: none;
		background-color: var(--clr1);
		border-radius: .4em
	}
	.humberger.-active .humberger__line {
		background-color: transparent;
	}
	.humberger.-active .humberger__line::before {
		top: 0;
		transform: rotate(45deg);
	}
	.humberger.-active .humberger__line::after {
		top: 0;
		transform: rotate(-45deg);
	}
	.humberger.-active .humberger__text::before {
	  content: 'close';
	}
	.humberger__line {
		display: block;
		height: 1.5px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
		width: 20px;
		background-color: var(--wht);
		transition: 0.4s;
	}
	.humberger__line:before,
	.humberger__line:after {
		content: "";
		display: block;
		height: 100%;
		position: absolute;
		width: 100%;
		background-color: var(--wht);
		transition: inherit;
	}
	.humberger__line:before {
		top: -7px;
	}
	.humberger__line:after {
		top: 7px;
	}
	.header__nav-area {
		position: fixed;
		top: 62px;
		left: 0;
		z-index: 9999;
		height: calc(100dvh - 6vw - 62px);
		width: 94vw;
		visibility: hidden;
		background-color: var(--wht);
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
		opacity: 0;
		transition: 0.4s;
	}
	.header__nav-area.-active {
		opacity: 1;
		visibility: visible;
	}
	.header__nav-area__inner {
		height: auto;
		padding: 0 0 5%;
		overflow-y: scroll;
	}
	.global-navigation {
		padding: 0;
	}
	.global-navigation__list > li {
		border-top: 1px solid #d5d5d5;
		font-size: var(--nm)
	}
	.global-navigation__list > li:not([class]) {
		padding: 4% 5%;
	}
	.global-navigation__list a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 8px;
		color: var(--dgry)
	}
	.global-navigation__list a::after {
		content: "";
		display: block;
		width: 7px;
		height: 7px;
		border-top: 1.5px solid var(--gry);
		border-right: 1.5px solid var(--gry);
		transform: rotate(45deg)
	}
}


/*=====================================
フッター
=====================================*/
footer {
	position: relative;
}
footer .contact {
	background-color: var(--clr1);
	color: var(--wht);
}
footer .contact .top-ttl,
footer .contact .top-ttl .en {
	color: var(--wht)
}
.contact__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--wht);
	border-radius: .5em;
	color: var(--clr1);
	font-size: var(--tl);
	font-weight: 700;
	text-decoration: none
}
.contact__btn span {
	position: relative;
	display: inline-block;
	transition: .3s
}
.contact__btn span::after {
	z-index: 0;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--pgry);
	border-radius: 50%;
	transform: translate(-50%,-50%);
	transition: .3s
}
.contact__btn span::before {
	z-index: 1;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url("../imgs/ic-mail.svg") no-repeat center / 66.667%;
}
.contact__btn:hover {
	background-color: var(--clr2);
	color: var(--clr1);
}
.contact__btn:hover span::after {
	width: min(7.4vw, 100px);
    height: min(7.4vw, 100px);
	background: var(--wht);
}
@media (max-width: 834px) {
	footer .contact {
		padding: 10% 0;
	}
	.contact__txt p {
		margin-bottom: 5%;
		text-align: center
	}
	.contact__btn {
		padding: .6em 1em .6em 1.4em;
	}
	.contact__btn span,
	.contact__btn span::after,
	.contact__btn span::before {
		width: 60px;
		height: 60px;
	}
}
@media (min-width: 835px) {
	footer .contact {
		padding: 5% 0;
	}
	.contact__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.contact__btn {
		padding: .8em 2em;
		width: 57%;
	}
	.contact__btn span,
	.contact__btn span::after,
	.contact__btn span::before {
		width: min(6.58vw, 90px);
		height: min(6.58vw, 90px);
	}
}
.footer {
	padding: 5% 0;
	background-color: var(--blk);
	color: var(--wht);
	font-size: var(--ts)
}
.footer-cont .ftr-name a {
	display: block;
}
.footer-cont .ftr-logo {
	display: block;
	aspect-ratio: 264/50;
}
.footer-cont address {
	font-style: normal
}
.footer-cont .tel {
	color: var(--wht);
	text-decoration: none
}
.ftr-ad {
	flex-basis: 30%
}
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	flex-basis: 60%
}
.footer-menu li {
	list-style: none
}
.footer-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wht);
	text-decoration: none
}
.footer-menu li a::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid var(--wht);
	border-right: 1.5px solid var(--wht);
	transform: rotate(45deg) translateY(-1px)
}
@media (max-width: 834px) {
	.footer {
		padding-bottom: 42px
	}
	.footer-cont .ftr-logo {
		width: 50%;
		margin-bottom: 4%
	}
	.footer-info {
		padding: 4% 0 5%
	}
	.footer-menu {
		margin-top: 5%
	}
}
@media (min-width: 835px) {
	.footer-cont {
		display: flex;
		align-items: center;
		gap: 3.6vw
	}
	.footer-cont .ftr-logo {
		width: 19.3vw;
	}
	.footer-cont .tel {
		pointer-events: none;
	}
	.footer-info {
		padding: 2% 0;
		justify-content: space-between
	}
}
.copyright {
	padding: 2% 0;
	border-top: 1px solid rgba(204,204,204,.3);
	color: #888;
	text-align: center
}
.pagetop {
	position: absolute;
	display: block;
	background-color: var(--wht);
	border-radius: 50%;
	box-shadow: 0px 0px 8px 0px rgba(100,100,100,.2);
	font-size: 0
}
.pagetop::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 9px;
	height: 9px;
	top: 2px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border-top: 1.5px solid var(--clr1);
	border-right: 1.5px solid var(--clr1);
	transform: rotate(-45deg)
}
@media (max-width: 834px) {
	.pagetop {
		bottom: 6vw;
		right: 3vw;
		width: 42px;
		height: 42px;
	}
}
@media (min-width: 835px) {
	.pagetop {
		bottom: 30px;
		right: 30px;
		width: 60px;
		height: 60px;
	}
}


/*=====================================
基本レイアウト
=====================================*/
[class^="inner-"] {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 835px) {
	.inner-l {
		width: min(90%, 1040px)
	}
	.inner-m {
		width: min(80%, 960px)
	}
	.inner-s {
		width: min(60%, 750px)
	}
}
@media (max-width: 834px) {
	.inner-l, .inner-m, .inner-s {
    	width: 100%;
		padding-left: 7%;
		padding-right: 7%
	}
}
.top-ttl {
	margin-bottom: 1.5rem;
	color: var(--clr1);
	font-weight: 700
}
.top-ttl .en {
	display: block;
	color: var(--blk);
	font-family: var(--fgt);
	font-size: var(--t4xl);
	line-height: 1.1;
	text-transform: uppercase
}
.top-ttl.txt-wht .en {
	color: var(--wht);
}
.sub-ttl {
	display: flex;
	align-items: center;
	gap: 1.25rem;
    margin-bottom: min(3.2%, 31px);
	padding-bottom: 1%;
	border-bottom: 1px solid var(--lgry);
	line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
}
.sub-ttl:not(.subTtl) {
	color: var(--clr1);
    font-size: var(--txl)
}
.sub-ttl::before {
    content: "";
	flex-shrink: 0;
    display: block;
    width: 1.5rem;
    height: .375rem;
	background-color: var(--clr1)
}
@media (max-width: 834px) {
	.top-ttl {
		font-size: var(--tm);
		text-align: center
	}
	.sub-ttl small {
		font-size: var(--ts)
	}
}
@media (min-width: 835px) {
	.top-ttl {
		font-size: var(--tl);
	}
	.sub-ttl small {
		font-size: var(--tm)
	}
}
.pgbnr {
	position: relative;
	width: 100%;
}
.pgbnr__txt {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	color: var(--wht);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.4;
	text-align: center
}
.pgbnr__txt:hover {
	color: var(--wht);
}
.pgbnr__txt .en {
	display: block;
	font-size: var(--txl);
	font-family: var(--fgt);
	text-transform: uppercase
}
.pgbnr::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: 100%;
	background: var(--clr1);
	mix-blend-mode: multiply;
	opacity: .5
}
@media (max-width: 834px) {
	.pgbnr,
	.pgbnr::before,
	.pgbnr__txt {
		height: 280px;
	}
	.pgbnr__txt {
		padding-top: 50px;
		font-size: var(--t2xl);
	}
	.topicpath {
		display: none
	}
}
@media (min-width: 835px) {
	.pgbnr,
	.pgbnr::before,
	.pgbnr__txt {
		height: 400px;
	}
	.pgbnr__txt {
		padding-top: 90px;
		font-size: var(--t3xl);
	}
	.topicpath {
		display: flex;
		padding: 20px 40px;
	}
	.topicpath li {
		list-style: none;
		color: var(--blk)
	}
	.topicpath li a {
		color: #afafaf;
		text-decoration: none
	}
	.topicpath li a:hover {
		color: var(--clr5)
	}
	.topicpath li:not(:first-child)::before {
		content: "";
		flex-shrink: 0;
		display: inline-block;
		margin: auto 10px;
		height: 10px;
		width: calc(10px / 2);
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		background-color: var(--clr1)
	}
}
.pgbnr.service-building {
	background: url("../imgs/pgbnr-service-building.webp") no-repeat center / cover
}
.pgbnr.service-boiler {
	background: url("../imgs/pgbnr-service-boiler.webp") no-repeat center / cover
}
.pgbnr.works {
	background: url("../imgs/pgbnr-works.webp") no-repeat center / cover
}
.pgbnr.partner {
	background: url("../imgs/pgbnr-partner.webp") no-repeat center / cover
}
.pgbnr.recruit {
	background: url("../imgs/pgbnr-recruit.webp") no-repeat center / cover
}
.pgbnr.about-us {
	background: url("../imgs/pgbnr-about-us.webp") no-repeat center / cover
}
.pgbnr.contact {
	background: url("../imgs/pgbnr-about-us.webp") no-repeat center / cover
}
.pgbnr.news {
	background: url("../imgs/pgbnr-about-us.webp") no-repeat center / cover
}

/* modal */
.modal-block {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: auto;
    background-color: rgba(0, 0, 0, .8);
}
.popBox img {
    opacity: 1;
    cursor: zoom-in;
    transition: .3s
}
.popBox:hover img {
    opacity: .8
}
.img-section {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
	padding: 0 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}
.img-section span {
    position: absolute;
    top: 5%;
    right: 3%;
    display: block;
    width: 2.625rem;
    height: 2.625rem;
    cursor: pointer;
}
.img-section span::after,
.img-section span::before {
    content: "";
    display: block;
    background: #fff;
    width: 2.625rem;
    height: 2px;
}
.img-section span::after {
    transform: rotate(45deg) translate(15px, 15px)
}
.img-section span::before {
    transform: rotate(-45deg) translate(-16px, 16px)
}
.img-section img {
    display: block;
    width: auto;
    height: auto;
    max-width: 60vw;
    max-height: 80vmin;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
.caption {
    font-size: var(--nm);
    color: #fff;
    margin-top: 1%;
    text-align: center;
}

/*ボタン*/
section > *:last-child {
	margin-bottom: 0
}
.cmnBtn, .anchor {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
	gap: 1rem;
    position: relative;
    margin: 0 1% 2%;
    padding: 1em 1.5em;
	border-radius: 100px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: .3s
}
.cmnBtn {
    background: var(--clr1);
    color: var(--wht);
}
.cmnBtn.topBtn {
    margin-left: 0;
    margin-right: 0;
    min-width: min(26.67vw, 400px);
}
.cmnBtn:hover {
    color: var(--wht);
    background: var(--clr4);
}
.cmnBtn::after {
    content: "";
    display: inline-block;
	width: 7px;
	height: 7px;
    margin-left: 15px;
    border-top: 1.5px solid var(--wht);
    border-right: 1.5px solid var(--wht);
    transform: rotate(45deg);
    transition: .3s
}
.cmnBtn:hover::after {
    right: 1em;
}
.formBtn, .backBtn {
	position: relative
}
.formBtn > input {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
	gap: 1rem;
    position: relative;
    margin: 0 1% 2%;
    padding: 1em 1.5em;
    background: var(--clr1);
	border-radius: 100px;
    color: var(--wht);
    font-weight: 700;
    line-height: 1.4;
	text-align: left;
    text-decoration: none;
    transition: .3s
}
.formBtn > input:hover {
    color: var(--wht);
    background: var(--clr4);
}
.formBtn::after {
    content: "";
	position: absolute;
	top: 50%;
    display: inline-block;
	width: 7px;
	height: 7px;
    margin-left: 15px;
    border-top: 1.5px solid var(--wht);
    border-right: 1.5px solid var(--wht);
    transform: rotate(45deg) translateY(-50%);
    transition: .3s
}
.backBtn > input {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
	gap: 1rem;
    position: relative;
    margin: 0 1% 2%;
    padding: 1em 1.5em;
	border-radius: 100px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
	text-align: left;
    transition: .3s
}
.anchor,
.backBtn > input {
    background: var(--wht);
    border: 1px solid var(--lgry);
    color: var(--gry);
}
p + .anchor {
    margin-top: min(1.67%, 16px)
}
.anchor:hover,
.backBtn > input:hover {
    color: var(--clr5);
    border: 1px solid var(--clr5);
}
.anchor::after {
    content: "";
    display: inline-block;
	width: 7px;
	height: 7px;
    margin-left: 15px;
    border-top: 1.5px solid var(--clr1);
    border-right: 1.5px solid var(--clr1);
    transform: rotate(45deg);
    transition: .3s
}
.backBtn::after {
    content: "";
	position: absolute;
	top: 50%;
    display: inline-block;
	width: 7px;
	height: 7px;
    margin-left: 15px;
    border-top: 1.5px solid var(--clr1);
    border-right: 1.5px solid var(--clr1);
    transform: rotate(45deg) translateY(-50%);
    transition: .3s
}
.anchor:hover::after {
    right: 1em;
    border-top: 1.5px solid var(--clr4);
    border-right: 1.5px solid var(--clr4);
}
.backBtn:hover::after {
    border-top: 1.5px solid var(--clr4);
    border-right: 1.5px solid var(--clr4);
}
@media (max-width: 749px) {
	.cmnBtn, .formBtn > input, .anchor, .backBtn > input {
		width: min(80vw,100%);
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 750px) and (max-width: 834px) {
	.cmnBtn, .formBtn > input, .anchor, .backBtn > input {
		width: min(64vw,100%);
		margin-left: auto;
		margin-right: auto;
	}
	.formBtn::after,
	.backBtn::after {
		right: 1.7em;
	}
}
@media (max-width: 834px) {
	.btnArea,
	.btnArea.txt-c,
	.btnArea.txt-r {
		text-align: var(--c)!important
	}
	.btnArea {
		margin-top: 6%;
		margin-bottom: 6%;
	}
	.formBtn::after,
 	.backBtn::after {
		right: 1.7em;
	}
}
@media (min-width: 835px) {
	.cmnBtn, .formBtn > input, .anchor, .backBtn > input {
		min-width: min(96%, 300px)
	}
	.btnArea {
		margin-top: min(4%, 39px);
		margin-bottom: min(4%, 39px);
	}
	.formBtn::after,
	.backBtn::after {
		right: 2.2em;
	}
}
/*アコーディオン*/
.accordion__wrap {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
.accordion__label {
	position: relative;
    display: flex;
    align-items: center;
	flex-direction: row-reverse;
	justify-content: flex-end;
	padding: min(1.5%, 11px) 0;
	font-size: var(--tm);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer
}
.accordion__label span.plus {
    position: relative;
    display: inline-block;
	flex-shrink: 0;
    width: 21px;
    height: 21px;
	background-color: var(--gry);
    border: 1px solid var(--gry);
	transform: translateY(-5%);
    transition: transform .4s;
    border-radius: 50%;
}
.accordion__label span.plus::after {
    content: '';
    display: block;
    height: 7px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    background-color: #fff;
    transition: transform .4s;
    transform: translate(-50%, -50%);
}
.accordion__label span.plus::before {
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: transform .4s;  
    opacity: 1;
}
.-open .accordion__label span.plus {
    background-color: var(--wht);
    border: 1px solid var(--gry);
    border-radius: 50%;
}
.-open .accordion__label .plus::after {
    background-color: var(--gry);
    transform: translate(-50%, -50%) rotate(-90deg);
}
.accordion__cont > * + * {
	margin-top: min(4%,28px)
}
@media (max-width: 834px) {
	.accordion__label span.plus {
		margin-right: 8px;
	}
	.accordion__cont {
		padding: 0 0 8%
	}
}
@media (min-width: 835px) {
	.accordion__label span.plus {
		margin-left: 8px;
		margin-right: 8px;
	}
	.accordion__cont {
		padding: 0 2% 8%
	}
}
.accordion__cont > *:last-child {
	margin-bottom: 0;
	padding-bottom: 0
}



/*=====================================
トップページ
=====================================*/
@keyframes opAnm {
    0% {
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}
@-webkit-keyframes opAnm {
    0% {
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}
@keyframes cpyAnm {
    0% {
        opacity: 0;
		filter: blur(1.5rem);
    }
    100% {
        opacity: 1;
		filter: blur(0);
    }
}
@-webkit-keyframes cpyAnm {
    0% {
        opacity: 0;
		filter: blur(1.5rem);
    }
    100% {
        opacity: 1;
		filter: blur(0);
    }
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@-webkit-keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.mv {
    position: relative;
    width: 100%;
	overflow: hidden;
}
.mv__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	padding-top: min(5%,60px);
    width: 100%;
	opacity: 0;
    -webkit-animation: opAnm .6s ease-out .2s 1 forwards;
    animation: opAnm .6s ease-out .2s 1 forwards
}
.mv-ttl,
.mv-txt {
	margin: 0 auto;
}
.mv-ttl {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
    -webkit-animation: cpyAnm 2s ease-out 1s 1 forwards;
    animation: cpyAnm 2s ease-out 1s 1 forwards
}
.mv-ttl img {
	display: block;
}
.mv-ttl img.cpy1 {
	aspect-ratio: 460/58;
}
.mv-ttl img.cpy2 {
	aspect-ratio: 490/58;
}
.mv-txt {
	padding-top: 1.4em;
	color: var(--wht);
	font-family: var(--mpr);
	font-weight: 400;
	text-align: center;
	opacity: 0;
    -webkit-animation: cpyAnm 1s ease-out 3s 1 forwards;
    animation: cpyAnm 1s ease-out 3s 1 forwards
}
.mvScr {
    display: inline-block;
    position: absolute;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    color: var(--wht);
    font-family: var(--fgt);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    writing-mode: vertical-lr
}
.mvScr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--wht);
    -webkit-animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
    animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite
}
.mvScr::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, .4)
}
@media (max-width: 749px) {
	.mv,
	.mv__inner {
		aspect-ratio: 10/16;
	}
	.mv__inner {
    	background: url("../imgs/mv-bg.webp") no-repeat 45% center / cover;
	}
	.mv-ttl {
		flex-direction: column;
		gap: 1em;
	}
	.mv-ttl,
	.mv-txt {
		width: 80%;
	}
	.mv-txt {
		font-size: var(--nm);
	}
	.mv-ttl img.cpy1,
	.mv-ttl img.cpy2 {
		width: 100%
	}
	.mvScr {
		right: 2%;
    	padding: 10px 10px 28vw;
		font-size: 8px;
	}
	.mvScr::after,
	.mvScr::before {
		height: 26vw;
	}
}
@media (min-width: 750px) {
	.mv,
	.mv__inner {
		aspect-ratio: 1366/768;
	}
	.mv__inner {
    	background: url("../imgs/mv-bg.webp") no-repeat center / cover;
	}
	.mv-ttl {
		gap: .5em;
	}
	.mv-txt {
		font-size: clamp(16px, 1.7vw, 20px);;
	}
	.mv-ttl img.cpy1 {
		width: 47.2%
	}
	.mv-ttl img.cpy2 {
		width: 50.3%
	}
	.mv-ttl,
	.mv-txt {
		width: min(76%,1200px);
	}
	.mvScr {
		right: 30px;
		padding: 0 0 10.5vw;
		font-size: 10px;
	}
	.mvScr::after,
	.mvScr::before {
		height: 10vw;
	}
}
.cmn-lead {
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.26vw
}
.top-service {	
	position: relative;
	padding: min(10vw,130px) 0;
}
.top-service::before {
	content: "Service";
	position: absolute;
	top: 3vw;
	z-index: -1;
	color: var(--pgry);
	font-family: var(--fgt);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase
}
.cmn__inner {
	width: min(90%,1040px);
	margin: 0 auto;
}
.top-srv__bnr {
	display: flex;
	align-items: stretch;
	aspect-ratio: 680/184;
	background-color: var(--wht);
	border-radius: .8em;
	overflow: hidden;
	text-decoration: none
}
.top-srv__bnr + .top-srv__bnr {
	margin-top: 1.4em;
}
.top-srv__bnr .img {
	display: block;
	aspect-ratio: 1/1;
	width: 27%
}
.top-srv__bnr .img img {
	width: 100%;
}
.top-srv__bnr .txt {
	flex-grow: 1;
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 1.4em;
}
.top-srv__bnr .txt .ttl {
	color: var(--blk);
}
.top-srv__bnr .txt p {
	padding-top: .5em;
	color: var(--clr1);
	font-weight: 700;
	line-height: 1.5
}
.top-srv__bnr .txt::before,
.top-srv__bnr .txt::after {
	content: "";
	position: absolute;
	aspect-ratio: 1/1
}
.top-srv__bnr .txt::before {
	bottom: .7em;
	right: .7em;
	width: 1.6rem;
	background-color: var(--clr1);
	border-radius: 50%
}
.top-srv__bnr .txt::after {
	display: block;
	bottom: 1.3em;
	right: 1.35em;
	width: .4rem;
	border-top: 1.5px solid var(--wht);
	border-right: 1.5px solid var(--wht);
	transform: rotate(45deg)
}
.slAnm {
    opacity : 0;
    transform : translateX(30px);
    transition-duration: .6s
}
.slAnm.scrin {
    opacity : 1;
    transform : translateX(0)
}
.fdAnm {
    opacity : 0;
    transform : translateY(-30px);
    transition-duration: .6s
}
.fdAnm.scrin {
    opacity : 1;
    transform : translateY(0)
}
.anm-item1 {
	transition-delay: 0;
	-webkit-transition-delay: 0;
}
.anm-item2 {
	transition-delay: .3s;
	-webkit-transition-delay: .3s;
}
.anm-item3 {
	transition-delay: .6s;
	-webkit-transition-delay: .6s;
}
@media (max-width: 749px) {
	.top-srv__bnr .txt .ttl {
		font-size: var(--nm)
	}
	.top-srv__bnr .txt p {
		font-size: var(--ts);
	}
}
@media (min-width: 750px) and (max-width: 749px) {
	.top-srv__bnr .txt .ttl {
		font-size: var(--tm)
	}
	.top-srv__bnr .txt p {
		font-size: var(--nm);
	}
}
@media (max-width: 834px) {
	.top-service::before {
		left: 50%;
		font-size: 20vw;
		transform: translateX(-50%)
	}
	.top-srv__link {
		margin-top: 5%
	}
	.top-srv__bnr {
		box-shadow: 0px 0px 8px 0px rgba(100,100,100,.2);
	}
}
@media (min-width: 835px) {
	.top-service::before {
		right: -15px;
		font-size: min(10.9vw,149px);
	}
	.top-srv__inner {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.top-srv__inner .top-srv__txt {
		flex-basis: 30%;
	}
	.top-srv__inner .top-srv__link {
		flex-basis: 65%;
	}
	.top-srv__bnr {
		box-shadow: 0px 0px 12px 0px rgba(100,100,100,.2);
	}
	.top-srv__bnr .txt .ttl {
		font-size: var(--tl)
	}
	.top-srv__bnr .txt p {
		font-size: var(--nm);
	}
}
@keyframes blrAnm {
    0% {
		filter: blur(0);
    }
    100% {
		filter: blur(.2rem);
    }
}
@-webkit-keyframes blrAnm {
    0% {
		filter: blur(0);
    }
    100% {
		filter: blur(.2rem);
    }
}
.top-reason {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.top-reason::after {
	content: "";
	z-index: 0;
	top: 0;
	left: 0;
	display: block;
	width: 100vw;
	height: 100vh;
    background: url("../imgs/top-adv-bg.webp") no-repeat center / cover;
	transform: scale(1.1)
}
.top-reason.bgAnm.scrin::after {
    -webkit-animation: blrAnm 1s ease-out 0s 1 forwards;
    animation: blrAnm 1s ease-out 0s 1 forwards
}
.top-reason::before {
	content: "Advantage";
	position: absolute;
	top: 3vw;
	z-index: 1;
	color: var(--pgry);
	font-family: var(--fgt);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	opacity: .1
}
.top-rsn__inner {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	padding: 6% 5%
}
.top-rsn__point {
    display: flex;
    justify-content: space-between;
	width: min(100%,860px);
	margin: 0 auto;
}
.top-rsn__point li {
    flex-basis: 30.4%;
    flex-shrink: 0;
	list-style: none
}
.top-rsn__point li a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
    aspect-ratio: 1/1;
	width: 100%;
	padding: 1rem .4rem;
    background-color: var(--wht);
	border-radius: .6em;
	color: var(--blk);
    font-size: var(--tm);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
	text-decoration: none
}
.top-rsn__point li a span {
	position: relative;
	aspect-ratio: 1/1;
	flex-shrink: 0;
	width: 1.6rem;
	background-color: var(--clr1);
	border-radius: 50%;
	font-size: 0
}
.top-rsn__point li a span::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: .1rem;
	left:  0;
	margin: auto;
	display: block;
	aspect-ratio: 1/1;
	width: .4rem;
	border-top: 1.5px solid var(--wht);
	border-right: 1.5px solid var(--wht);
	transform: rotate(45deg)
}
.top-rsn__point li img {
    aspect-ratio: 1/1;
    margin: 0 auto;
}
@media (max-width: 749px) {
	.top-reason,
	.top-rsn__inner {
		height: 480px;
	}
}
@media (min-width: 750px) and (max-width: 834px) {
	.top-reason,
	.top-rsn__inner {
		height: 600px;
	}
}
@media (max-width: 834px) {
	.top-reason::before {
		left: 50%;
		font-size: 20vw;
		transform: translateX(-50%)
	}
	.top-rsn__point li img {
		width: 60%
	}
}
@media (min-width: 835px) {
	.top-reason,
	.top-rsn__inner {
		height: 680px;
	}
	.top-reason::before {
		left: -15px;
		font-size: min(10.9vw,149px);
	}
	.top-rsn__point li img {
		width: 33%
	}
}
.top-works {
	position: relative;
	padding: min(10vw,130px) 0;
}
.top-works::before {
	content: "Works";
	position: absolute;
	top: 3vw;
	z-index: -1;
	color: var(--pgry);
	font-family: var(--fgt);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase
}
/*swiper*/
.swiper {
	overflow: visible;
	border-top: 1px solid var(--lgry);
	border-bottom: 1px solid var(--lgry);
}
.swiper-wrapper {
	align-items: stretch
}
.swiper-slide {
	box-sizing: border-box;
	border-left: 1px solid var(--lgry);
}
.swiper-slide a {
	display: block;
	text-decoration: none
}
.swiper-slide img,
.swiper-slide .ttl,
.swiper-slide .tag {
	width: 84%;
}
.swiper-slide img {
	display: block;
	margin: 0 auto .5rem;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: .6rem;
}
.swiper-slide .ttl {
	margin: 0 auto 1rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--blk);
	font-size: var(--tm);
	line-height: 1.5
}
.swiper-slide .tag {
	margin: 0 auto;
}
.swiper-btn {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.swiper-button-prev,
.swiper-button-next {
	position: relative!important;
	left: auto;
	right: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1/1;
	width: 3.1rem;
	height: 3.1rem;
	margin: 0!important;
	background-color: #fff;
	border: 1px solid var(--lgry);
	border-radius: 50%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
	display: none
}
.swiper-button-prev::before,
.swiper-button-next::before {
	content: "";
	display: block;
	width: .6rem;
	height: .6rem;
	border-top: 1.5px solid var(--clr1);
	border-right: 1.5px solid var(--clr1);
}
.swiper-button-prev::before {
	margin-right: -.3rem;
	transform: rotate(-135deg)
}
.swiper-button-next::before {
	margin-left: -.3rem;
	transform: rotate(45deg)
}
@media (max-width: 834px) {
	.top-works::before {
		left: 50%;
		font-size: 20vw;
		transform: translateX(-50%)
	}
	.top-wrks__inner {
		margin-bottom: 2rem
	}
	.swiper-slide {
		padding: 2.4rem 0;
	}
	.swiper-btn {
		top: -1.5rem;
		right: 4.8%;
	}
}
@media (min-width: 835px) {
	.top-works::before {
		right: -15px;
		font-size: min(10.9vw,149px);
	}
	.top-wrks__inner {
		display: flex;
		align-items: flex-start;
		margin-bottom: 1rem;
		gap: 3rem
	}
	.top-wrks__inner {
	}
	.swiper-slide {
		padding: 1.4rem 0;
	}
	.swiper-slide a {
		transition: .3s
	}
	.swiper-slide a:hover {
		opacity: .7
	}
	.swiper-btn {
		top: -4rem;
		right: 10%;
	}
}
.top-contbnr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-repeat: no-repeat;
	background-size: 100%;
	text-decoration: none;
	transition: .3s
}
.top-contbnr:hover {
	background-size: 110%;
}
.top-contbnr.partner {
	background-image: url("../imgs/top-partner-bg.webp")
}
.top-contbnr.recruit {
	background-image: url("../imgs/top-recruit-bg.webp")
}
.top-contbnr .txt {
	color: var(--wht)
}
.top-contbnr .anchor {
	padding: .5em 1.5em;
	background-color: rgba(255,255,255,.7);
	border: 1.5px solid var(--wht);
	color: var(--clr1)
}
@media (max-width: 749px) {
	.top-contbnr {
		aspect-ratio: 5/2.6;
		padding: 1rem 7%;
		background-position: center top;
	}
	.top-contbnr .top-ttl {
		margin-bottom: .5rem;
		text-align: left
	}
	.top-contbnr .txt {
		font-size: var(--ts)
	}
	.top-contbnr .anchor {
		margin-top: 1rem;
		margin-left: 0;
		margin-right: auto;
		width: 70%;
	}
	.top-contbnr + .top-contbnr {
		margin-top: 1px
	}
}
@media (min-width: 750px) {
	.top-contbnr-wrap {
		display: flex
	}
	.top-contbnr {
		flex-basis: 50%;
		padding: 1rem 5%;
		background-position: center;
		aspect-ratio: 683/400;
	}
	.top-contbnr .top-ttl {
		margin-bottom: 1rem;
	}
	.top-contbnr .anchor {
		margin-top: 2rem;
	}
}
.top-about {
	position: relative;
	padding: min(10vw,130px) 0
}
.top-about::before {
	content: "About us";
	position: absolute;
	top: 3vw;
	z-index: -1;
	color: var(--pgry);
	font-family: var(--fgt);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.top-abt__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between
}
@media (max-width: 834px) {
	.top-about::before {
		left: 50%;
		font-size: 20vw;
		transform: translateX(-50%)
	}
	.top-abt__inner .top-abt__ph {
		display: none
	}
}
@media (min-width: 835px) {
	.top-about::before {
		left: -15px;
		font-size: min(10.9vw,149px);
		writing-mode: vertical-lr;
	}
	.top-abt__inner .top-abt__ph {
		position: relative;
		flex-basis: 34%;
		aspect-ratio: 356/624;
	}
	.top-abt__inner .top-abt__ph .img1,
	.top-abt__inner .top-abt__ph .img2 {
		position: absolute;
		aspect-ratio: 4/5;
		border-radius: .6rem;
		box-shadow: 0px 0px 12px 0px rgba(100,100,100,.2);
	}
	.top-abt__inner .top-abt__ph .img1 {
		z-index: 1;
		top: 0;
		right: 0;
		width: 90%
	}
	.top-abt__inner .top-abt__ph .img2 {
		z-index: 2;
		bottom: 0;
		left: -7%;
		width: 67.4%
	}
	.top-abt__inner .top-abt__cont {
		flex-basis: 57%;
	}
}
dl.news-list dt {
	padding-left: .5rem;
	padding-right: .5rem;
	color: var(--gry);
	font-size: var(--ts)
}
dl.news-list dt:not(:first-child) {
	padding-top: 1rem
}
dl.news-list dd {
	padding-left: .5rem;
	padding-right: .5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--lgry)
}
dl.news-list dd a {
	position: relative;
	display: block;
	padding-right: 2.8rem;
}
dl.news-list dd a::before,
dl.news-list dd a::after {
	content: "";
	position: absolute;
	aspect-ratio: 1/1
}
dl.news-list dd a::before {
	top: calc(50% - clamp(9px, .855vw, 11.7px));
	right: 0;
	width: 1.6rem;
	background-color: var(--clr1);
	border-radius: 50%;
	transform: translateY(-50%)
}
dl.news-list dd a::after {
	display: block;
	top: calc(50% - clamp(9px, .855vw, 11.7px));
	right: .8em;
	width: .4rem;
	margin-top: -1px;
	border-top: 1.5px solid var(--wht);
	border-right: 1.5px solid var(--wht);
	transform: rotate(45deg) translateY(-50%)
}
.news-time {
	padding-bottom: .5rem;
	color: var(--gry);
	font-size: var(--ts);
}


/*=====================================
内部パーツ その他
=====================================*/

.category-list dt {
	font-weight: 700
}
.category-list .badge {
	background-color: var(--wht)
}
.category-list dt:not(:first-of-type) {
	border-top: 1px solid var(--lgry)
}
@media (max-width: 834px) {
	.category-list dt {
		padding: .8rem .4rem 0;
		font-weight: 700
	}
	.category-list dd {
		padding: 0 .4rem .8rem;
	}
}
@media (min-width: 835px) {
	.category-list {
		display: flex;
		flex-wrap: wrap;
	}
	.category-list dt {
		flex-basis: 20%;
		display: flex;
		align-items: center;
		padding: .8rem .4rem;
	}
	.category-list dd {
		flex-basis: 80%;
		padding: .8rem .4rem;
	}
	.category-list dd:not(:first-of-type) {
		border-top: 1px solid var(--lgry)
	}
}
.works-list {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	border-top: 1px solid var(--lgry)
}
.works-list__item {
	box-sizing: border-box;
	padding: 1rem 0;
}
.works-list__item a {
	display: block;
	text-decoration: none
}
.works-list__item img,
.works-list__item .ttl,
.works-list__item .tag {
	width: 84%;
}
.works-list__item img {
	display: block;
	margin: 0 auto .5rem;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: .6rem;
}
.works-list__item .ttl {
	margin: 0 auto 1rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--blk);
	font-size: var(--tm);
	line-height: 1.5
}
.works-list__item .tag {
	margin: 0 auto;
}
@media (max-width: 834px) {
	.works-list__item {
		flex-basis: 50%;
		border-bottom: 1px solid var(--lgry);
		border-right: 1px solid var(--lgry)
	}
	.works-list__item:nth-of-type(odd) {
		border-left: 1px solid var(--lgry)
	}
}
@media (min-width: 835px) {
	.works-list__item {
		flex-basis: calc(100% / 3);
		border-bottom: 1px solid var(--lgry);
		border-right: 1px solid var(--lgry)
	}
	.works-list__item:nth-of-type(3n + 1) {
		border-left: 1px solid var(--lgry)
	}
	.works-list__item a {
		transition: .3s
	}
	.works-list__item a:hover {
		opacity: .7
	}
}

/*エラーメッセージ*/
div.error {
	font-size: var(--nm);
	color: var(--red);
	margin: 5px 0 0;
}

/*フォーム*/
ol.form-step {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    margin-bottom: min(5.78%, 50px);
    padding: 0;
    width: 100%
}
ol.form-step li {
    flex-basis: calc((100% - 34px) / 3);
	display: flex;
	align-items: center;
	gap: 10px;
    padding: 1rem .5rem;
    background: var(--lgry);
    color: var(--wht);
    text-align: center
}
@media (max-width: 834px) {
	ol.form-step li {
		flex-direction: column;
    	font-size: var(--ts);
		line-height: 1.4
	}
}
@media (min-width: 835px) {
	ol.form-step li {
		justify-content: center;
    	font-size: var(--nm);
	}
}
ol.form-step li::before {
	border: 0;
	color: var(--lgry)
}
ol.form-step li.now::before {
	color: var(--clr1)
}
ol.form-step li::after {
    position: absolute;
    top: calc(50% - 12px);
    right: -14px;
}
ol.form-step li:not(:last-child)::after {
    content: "";
	display: inline-block;
	height: 24px;
	width: calc(30px / 2);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background-color: var(--lgry);
}
ol.form-step li.now::after {
	background-color: var(--clr1);
}
ol.form-step li.now {
    background: var(--clr1);
    font-weight: 700;
}
.thanks {
    aspect-ratio: 968/108
}
.form_L {
    width: 100%
}
.form_M {
    width: 70%
}
.form_S {
    width: 50%
}
select {
    color: var(--blk)
}
.formArea {
    border-top: solid 1px var(--lgry);
    font-size: var(--nm)
}
.formBox {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-bottom: solid 1px var(--lgry);
}
.formBox dt,
.formBox dd {
    line-height: 1.8
}
.formBox dt {
	font-weight: 700
}
@media (max-width: 749px) {
	.formBox dt, .formBox dd {
        width: 100%;
    }
	.formBox dt {
		padding: 1.4rem .4rem 0;
		border-top: solid 1px var(--lgry);
	}
	.formBox dd {
		padding: .2rem 0 1.4rem;
	}
}
@media (min-width: 750px) {
	.formBox dt, .formBox dd {
		padding: 1.2rem .8rem;
		border-top: solid 1px var(--lgry);
    }
	.formBox dt {
		flex-basis: 30%
	}
	.formBox dd {
		flex-basis: 70%
	}
	.thanks {
		width: 60%;
	}
}
.formBox dt:first-of-type,
.formBox dd:first-of-type {
    border-top: 0
}
.formArea textarea,
.formArea input:not([type=submit]):not([type=button]),
.formArea select {
	margin: .4rem;
    padding: .2rem .5rem;
    border: solid 1px var(--lgry);
    font-size: var(--nm);
    outline: none;
	transition: all .3s
}
.formArea input[type=text],
.formArea textarea {
    background: #f6f6f6
}
.formArea label {
    display: inline-block;
    font-weight: 700;
    line-height: 1.8
}
.formArea .formBox label {
    font-weight: 400
}
.formArea input[type=checkbox],
.formArea input[type=radio] {
    display: none
}
.formArea label span {
    position:relative;
    padding-left: 30px;
    margin-right: 1rem
}
.formArea label span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--pgry);
    border: 1px solid var(--lgry);
    -webkit-transition: all .3s;
    transition: all .3s
}
.formArea label > .radio-lbl::before {
    border-radius: 50%
}
.formArea input[type=checkbox]:checked + label > .checkbox-lbl::before,
.formArea input[type=radio]:checked + label > .radio-lbl::before {
    background-color: var(--wht)
}
.formArea input[type=checkbox]:checked + label > .checkbox-lbl::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 6px;
    width: 8px;
    height: 14px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: solid 2px var(--clr1);
    border-right: solid 2px var(--clr1);
}
.formArea input[type=radio]:checked + label > .radio-lbl::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background: var(--clr1);
    border-radius: 50%
}
.formArea label.list {
	display: inline-block;
    padding: .4rem;
}
.formArea select {
    -webkit-appearance: none;
    appearance: none;
    padding: .2rem 60px .2rem .8rem;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0) 50%, #808080 50%),
        linear-gradient(135deg, #808080 50%, rgba(255,255,255,0) 50%),
        linear-gradient(to right, #dadada, #dadada);
    background-position:
        calc(100% - 1.2em) calc(50% + 1px),
        calc(100% - .85em) calc(50% + 1px),
        calc(100% - 2.4em) 0;
    background-size:
        .4em .4em,
        .4em .4em,
        1px 100%;
    background-repeat: no-repeat;
    border-radius: 4px
}
.formArea select::-ms-expand {
    display: none;
}
.formArea input[type=text]:focus,
.formArea textarea:focus {
	background-color: var(--wht);
    border: 1px solid var(--clr4)
}
.formArea input[type=submit],
.formArea input[type=button] {
	outline: none;
	cursor: pointer
}
.formArea button:focus {
	outline: none
}
.formBtn {
    margin-top: min(6.94%, 60px);
    margin-bottom: min(6.94%, 60px);
    text-align: center
}
.formBtn [class^="btn-"] {
    padding: 0;
    width: 278px;
    min-width: 278px;
}
.formBtn .anchor {
    width: 278px;
    min-width: 278px;
}
.formBtn [class^="btn-"] + [class^="btn-"] {
    margin-left: 20px
}
.formBtn [class^="btn-"] input {
    padding: 20px 40px 20px 15px;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    outline: none;
    cursor: pointer;
    border: 0;
    color: var(--gry);
    font-size: var(--nm);
    font-weight: 700;
    text-align: left;
    transition: .3s
}
.formBtn [class^="btn-"].redBtn input {
    padding: 20px 50px 20px 20px;
    color: var(--wht);
}
.formBtn [class^="btn-"]:hover input {
    color: var(--red)
}
.errorBox {
    margin: min(4.62%, 40px) auto;
    padding: 3% 5%;
    background: var(--clr2);
    border: 1px solid var(--red);
}
.form-error {
    display: block;
    color: var(--red);
    line-height: 1.8
}
.form-error p {
    padding-bottom: 0
}
.error_messe {
    color: var(--red)
}
.entry strong.req, .req {
    display: inline-block;
    margin: 0 10px;
    padding: 0 8px;
    background: var(--red);
    border-radius: 2px;
    color: var(--wht);
    font-size: var(--ts);
    line-height: 1.6
}
textarea:focus::placeholder {
  color: transparent;
}